@font-face{font-family:Marker;src:url(assets/marker.woff2)}@font-face{font-family:Type;src:url(assets/type.woff2)}@font-face{font-family:Elite;src:url(assets/elite.woff2)}
*{box-sizing:border-box}body{margin:0;color:#1f1b18;background:#f4edda;font:16px/1.4 Type,monospace}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:Marker;font-weight:400}dl,dd{margin:0}.frame{min-height:850px;padding:0 46px;background:#f4edda}.preview{margin:0 -46px;background:#f7cf31;text-align:center;padding:8px 10px;font:10px Type;letter-spacing:.7px}header{display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-bottom:2px solid;font-size:12px}header b{font:23px Marker}header b span{font:20px Type}footer{display:flex;justify-content:space-between;border-top:2px solid;padding:20px 0;margin-top:32px;font-size:11px}.eyebrow{font:11px Type;text-transform:uppercase;letter-spacing:1px}.sample{font:10px/1.6 Type;color:#635b4e}.digit{font-family:Type!important;font-weight:700!important}small{font:10px Type}.status{display:inline-block;background:#bde7dd;border:2px solid;padding:8px 12px;font-size:11px}.status:before{content:'●';margin-right:9px}.tape{position:absolute;width:90px;height:26px;background:#f7cf31bb;top:-13px;left:35%;transform:rotate(-6deg)}.red{color:#e8402a}
/* cable desk */
.cable-intro{display:flex;justify-content:space-between;align-items:end;padding:35px 0 10px}.cable-intro h1{font-size:60px;line-height:1.06}.cable-intro p{max-width:260px;font:16px/1.5 Elite}.wire-scene{position:relative;height:250px;display:flex;justify-content:space-between;align-items:center;padding:0 75px;margin-top:15px}.wire-scene svg{position:absolute;left:0;top:0;width:100%;height:100%}.browser-box,.server-box{position:relative;background:#fffdf6;border:3px solid;box-shadow:6px 6px 0 #1f1b18;width:235px;z-index:1}.browser-top{border-bottom:2px solid;padding:7px 13px;font-size:11px}.browser-box h2{font-size:33px;padding:27px 18px}.server-box{width:210px;background:#bde7dd;padding:22px}.server-box h2{font:64px/1 Type;font-weight:700;letter-spacing:-5px;margin-top:15px}.server-slots{display:flex;gap:5px;margin-top:17px}.server-slots i{display:block;border:1px solid;width:6px;height:23px}.wire-note{position:absolute;left:43%;bottom:15px;transform:rotate(-6deg);font:18px Marker;background:#f7cf31;padding:4px 9px}.cable-facts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;padding:25px 0 15px}.cable-facts>div{border-top:2px dashed;padding-top:15px}.cable-facts dt{font-size:11px}.cable-facts dd{font-size:21px;margin-top:12px}.concept{display:flex;gap:12px;align-items:center;margin-top:20px;font-size:11px}.concept b{background:#f7cf31;padding:4px 7px;white-space:nowrap}.cable .sample{margin-top:13px}
/* ruled notebook */
.notebook{display:grid;grid-template-columns:230px 1fr;gap:44px;padding:40px 0 0}.note-side h1{font-size:56px;line-height:1.05;margin:16px 0 22px}.note-side p{font:16px/1.6 Elite}.binder{position:relative;background:#fffdf6;border:2px solid;box-shadow:7px 7px 0 #d9d1bd;padding:26px 30px 25px 55px;transform:rotate(.5deg)}.binder:before{position:absolute;content:'';left:34px;top:0;bottom:0;border-left:1px solid #e8402a88}.rings{position:absolute;left:-14px;top:22px;display:grid;gap:40px}.rings i{display:block;width:26px;height:12px;border:3px solid #1f1b18;border-radius:12px;background:#d9d1bd}.binder-head{display:flex;justify-content:space-between;border-bottom:2px solid;padding-bottom:15px;gap:15px}.binder-head h2{font:46px/1 Type;letter-spacing:-3px}.note-lines{background:repeating-linear-gradient(transparent,transparent 39px,#81796855 39px,#81796855 40px);padding:8px 0 0}.note-line{min-height:80px;padding-top:12px}.note-line code{display:block;color:#1663c7;font:12px Type}.note-line strong{display:block;font:19px/1.5 Elite;padding-top:9px}.note-line strong.digit{font-size:24px}.note-last{background:#ff71a666;font:16px Marker;display:inline-block;padding:6px 10px;transform:rotate(-2deg);margin-top:16px}.notebook .sample{margin-top:20px}.margin-sticker{background:#f7cf31;border:2px solid;transform:rotate(-5deg);padding:12px;font:17px Marker;margin-top:25px}
/* public noticeboard */
.notice-title{padding:30px 0 24px;display:flex;justify-content:space-between;align-items:end}.notice-title h1{font-size:58px;line-height:1.05}.notice-title .status{transform:rotate(3deg);margin-bottom:8px}.board{position:relative;background:#1f1b18;padding:26px 30px 28px;box-shadow:7px 7px 0 #817968;border:2px solid #1f1b18}.board-head{display:flex;justify-content:space-between;color:#f4edda;font-size:10px;letter-spacing:1px;border-bottom:1px solid #817968;padding-bottom:18px}.clock{display:flex;justify-content:center;gap:16px;margin:24px 0 17px}.clock-unit{display:flex;gap:4px;position:relative;padding-bottom:22px}.clock-unit>span{font:84px/1.2 Type;background:#f4edda;display:block;color:#1f1b18;border-radius:3px;padding:0 9px;position:relative}.clock-unit>span:after{content:'';position:absolute;top:50%;left:0;right:0;border-top:2px solid #817968}.clock-unit small{position:absolute;bottom:0;left:0;right:0;text-align:center;color:#f4edda;letter-spacing:2px}.board-caption{color:#f7cf31;text-align:center;font:20px Marker;margin-top:23px}.receipt-strip{display:grid;grid-template-columns:1fr 1fr 1fr;background:#fffdf6;border:2px solid;border-top:0;position:relative;margin:0 24px;padding:22px 26px 25px;gap:22px;clip-path:polygon(0 0,100% 0,100% 96%,98% 100%,96% 96%,94% 100%,92% 96%,90% 100%,88% 96%,86% 100%,84% 96%,82% 100%,80% 96%,78% 100%,76% 96%,74% 100%,72% 96%,70% 100%,68% 96%,66% 100%,64% 96%,62% 100%,60% 96%,58% 100%,56% 96%,54% 100%,52% 96%,50% 100%,48% 96%,46% 100%,44% 96%,42% 100%,40% 96%,38% 100%,36% 96%,34% 100%,32% 96%,30% 100%,28% 96%,26% 100%,24% 96%,22% 100%,20% 96%,18% 100%,16% 96%,14% 100%,12% 96%,10% 100%,8% 96%,6% 100%,4% 96%,2% 100%,0 96%)}.receipt-strip dt{font-size:10px}.receipt-strip dd{font-size:18px;margin-top:9px}.notice .sample{margin-top:22px}.notice .concept{justify-content:center}
@media(max-width:650px){.frame{padding:0 22px;min-height:900px}.preview{margin:0 -22px;font-size:9px}header{font-size:10px;padding:17px 0}header b{font-size:21px}header b span{font-size:18px}footer{flex-direction:column;gap:10px;font-size:10px}.cable-intro{display:block;padding:27px 0 0}.cable-intro h1{font-size:44px}.cable-intro p{font-size:14px;max-width:none;margin-top:18px}.wire-scene{height:400px;padding:22px 0;flex-direction:column;align-items:start;gap:40px}.browser-box{width:180px;align-self:start}.browser-box h2{font-size:25px;padding:16px}.server-box{width:185px;padding:18px;align-self:end}.server-box h2{font-size:54px}.server-slots{margin-top:12px}.server-slots i{height:16px}.wire-scene svg{display:none}.wire-scene:before{content:'';position:absolute;width:200px;height:210px;border:4px solid #1663c7;border-radius:35px;top:100px;left:52px}.wire-note{bottom:auto;top:177px;left:0;font-size:16px}.cable-facts{grid-template-columns:1fr;gap:20px;padding-top:20px}.cable-facts>div{display:grid;grid-template-columns:110px 1fr;gap:10px;padding-top:13px}.cable-facts dd{font-size:17px;margin:0}.cable-facts dt{font-size:10px}.concept{font-size:10px;align-items:start;line-height:1.5}.concept b{white-space:normal}.notebook{grid-template-columns:1fr;gap:34px;padding-top:25px}.note-side h1{font-size:43px;margin:10px 0 12px}.note-side p{font-size:14px}.margin-sticker{display:inline-block;font-size:14px;padding:8px;margin-top:17px;transform:rotate(-2deg)}.binder{padding:22px 18px 23px 39px;transform:rotate(0)}.binder:before{left:25px}.binder-head{display:block}.binder-head h2{font-size:43px;margin-top:10px}.binder-head .eyebrow{font-size:9px}.note-line code{font-size:10px}.note-line strong{font-size:16px}.note-line strong.digit{font-size:22px}.note-last{font-size:14px}.note-lines{background:repeating-linear-gradient(transparent,transparent 39px,#81796855 39px,#81796855 40px)}.notebook .sample{font-size:9px}.notice-title{display:block;padding:26px 0}.notice-title h1{font-size:43px}.notice-title .status{margin:20px 0 0;transform:rotate(-2deg)}.board{padding:20px 13px}.board-head{font-size:8px;letter-spacing:0}.clock{gap:8px;margin:23px 0 10px}.clock-unit{gap:2px;padding-bottom:21px}.clock-unit>span{font-size:39px;padding:0 4px}.clock-unit small{font-size:8px;letter-spacing:1px}.board-caption{font-size:17px;margin-top:17px}.receipt-strip{grid-template-columns:1fr;margin:0 12px;padding:21px 19px 34px;gap:16px}.receipt-strip>div{display:grid;grid-template-columns:85px 1fr;gap:10px;border-bottom:1px dashed #817968;padding-bottom:14px}.receipt-strip>div:last-child{border:0;padding:0}.receipt-strip dd{font-size:16px;margin:0}.receipt-strip dt{font-size:9px}.notice .concept{justify-content:start}.notice .sample{font-size:9px}}

.frame{max-width:1100px;margin:auto;min-height:100vh}.note-line{padding-top:0;min-height:80px}.command{display:block;width:100%;min-height:44px;text-align:left;border:0;padding:8px 0;background:none;color:#1663c7;font:12px Type;cursor:pointer}.command:after{content:'−';float:right;margin-left:10px}.command[aria-expanded=false]:after{content:'+'}.command:focus-visible,a:focus-visible{outline:2px solid #1663c7;outline-offset:4px}.note-line strong{padding-top:0;padding-bottom:10px}.note-line [hidden],.note-line[hidden]{display:none!important}.interaction-hint{font:11px/1.6 Type;margin-top:18px;color:#635b4e}.status{font-size:10px;white-space:nowrap}.status:before{content:'●';margin-right:7px}.status.unverified{background:#f4edda}.status.unverified:before{content:'○'}footer a{color:inherit;text-decoration:none}footer a:hover{text-decoration:underline}.update-note{font:9px/1.6 Type;margin-top:10px;color:#635b4e}.binder-head{align-items:center}.binder{transform:none}.rings{pointer-events:none}@media(max-width:650px){.command{font-size:10px;line-height:1.6}.binder-head{display:flex;flex-wrap:wrap;gap:12px}.binder-head h2{margin-top:6px}.status{font-size:9px}.notebook{padding-bottom:6px}.update-note{font-size:9px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}