.sticky{cursor:grab;touch-action:none;user-select:none;border:0;color:var(--ink);overflow-wrap:anywhere}.sticky:focus-visible,.desk-object:focus-visible{outline:3px solid var(--blue);outline-offset:3px}.sticky.dragging{cursor:grabbing;box-shadow:5px 10px 16px color-mix(in srgb,color-mix(in srgb,#ffffff 0%,#000000) 33%,transparent);z-index:30}.sticky.placed{right:auto;bottom:auto;display:grid;transform:rotate(-3deg)!important}.note-pad{display:block;margin:24px auto 0;width:110px;min-height:86px;background:var(--yellow);border:0;border-top:8px solid #ffde2b;box-shadow:3px 3px 0 #ffde2b,6px 6px 0 color-mix(in srgb,#ffde2b 90%,#000000),8px 10px 12px color-mix(in srgb,color-mix(in srgb,#ffffff 0%,#000000) 13%,transparent);font:11px/1.6 var(--mono);transform:rotate(-6deg)}.note-pad:hover{transform:rotate(-3deg) translateY(-3px)}.desk-instructions{font:10px/1.7 var(--mono);text-align:center;margin:18px 0 0;color:color-mix(in srgb,#ffffff 34%,#000000)}.note-editor{width:min(360px,90vw);border:2px solid var(--ink);background:var(--paper2);box-shadow:7px 7px 0 color-mix(in srgb,#ffffff 7%,#000000);padding:22px;font:12px/1.6 var(--mono)}.note-editor::backdrop{background:color-mix(in srgb,color-mix(in srgb,#ffffff 7%,#000000) 47%,transparent)}.note-editor h2{font-size:17px;margin:0 0 14px}.note-editor textarea{display:block;width:100%;min-height:120px;margin:8px 0 12px;padding:12px;font:14px/1.6 var(--mono);border:1px solid color-mix(in srgb,#ffffff 7%,#000000);background:var(--yellow);resize:vertical}.note-editor select{padding:6px;margin:8px}.note-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.note-status{min-height:20px;text-align:center;font:11px/1.7 var(--mono);margin:12px 0 0}.desk-object{cursor:pointer}.key{cursor:pointer}.key:active,.key.pressed{filter:brightness(.8);translate:0 2px}.screen.power-off>*{visibility:hidden}.screen.power-off{background:color-mix(in srgb,#ffffff 9%,#000000)}.monitor.is-drop-target{outline:3px dashed #ffde2b;outline-offset:6px}.desk-object:active{scale:.92}@media(max-width:460px){.sticky{display:grid;width:64px;min-height:58px;font-size:9px}.note-1{left:0}.note-2{right:0}.note-3{left:0}.note-4{right:0}.note-pad{margin-top:22px}}@media(prefers-reduced-motion:no-preference){.desk-object,.note-pad{transition:transform .18s,scale .18s}}
/* Sculpted keycaps sit inside a recessed metal switch plate. */
.keyboard{height:auto;min-height:186px;padding:24px 14px 21px;margin:5px auto 0;border:1px solid color-mix(in srgb,#ffffff 38%,#000000);border-bottom:9px solid color-mix(in srgb,#ffffff 9%,#000000);border-radius:9px 9px 19px 19px;background:linear-gradient(175deg,color-mix(in srgb,#ffffff 39%,#000000) 0%,color-mix(in srgb,#ffffff 23%,#000000) 8%,color-mix(in srgb,#ffffff 15%,#000000) 45%,color-mix(in srgb,#ffffff 20%,#000000) 94%,color-mix(in srgb,#ffffff 27%,#000000));box-shadow:inset 0 2px 1px color-mix(in srgb,#ffffff 61%,#000000),inset 2px 0 3px color-mix(in srgb,#ffffff 46%,#000000),inset -3px -2px 3px color-mix(in srgb,#ffffff 6%,#000000),0 3px 0 color-mix(in srgb,#ffffff 31%,#000000),0 11px 0 color-mix(in srgb,#ffffff 8%,#000000),0 16px 3px color-mix(in srgb,#ffffff 7%,#000000),0 24px 22px color-mix(in srgb,color-mix(in srgb,#ff6700 27%,#000000) 40%,transparent);transform:perspective(850px) rotateX(19deg);transform-origin:center top;isolation:isolate}
.keyboard:before{content:'';position:absolute;inset:20px 8px 12px;border:1px solid color-mix(in srgb,#ffffff 8%,#000000);border-radius:5px;background:color-mix(in srgb,#ffffff 8%,#000000);box-shadow:inset 0 3px 7px color-mix(in srgb,#ffffff 0%,#000000);z-index:-1}
.keyboard-badge{position:absolute;top:6px;left:15px;right:15px;display:flex;justify-content:space-between;font:6px var(--mono);letter-spacing:1.2px;color:color-mix(in srgb,#ff6700 69%,#ffffff)}.keyboard-lights{display:flex;align-items:center;gap:5px}.keyboard-lights i{width:4px;height:4px;border-radius:50%;background:color-mix(in srgb,#ffde2b 61%,#ffffff);box-shadow:0 0 6px color-mix(in srgb,#ffde2b 66%,#ffffff)}
.key-row{height:25px;gap:5px;margin-bottom:7px}.key-row:last-child{margin-bottom:0}.key{position:relative;padding:0!important;align-items:center;justify-content:center;font:9px var(--mono);border:0;border-radius:4px 4px 5px 5px;background:linear-gradient(100deg,color-mix(in srgb,#ff6700 62%,#ffffff),color-mix(in srgb,#ff6700 43%,#ffffff) 50%,color-mix(in srgb,#ff6700 83%,#ffffff));color:color-mix(in srgb,#ff6700 47%,#000000);box-shadow:0 1px 0 color-mix(in srgb,#ff6700 71%,#ffffff),0 4px 0 color-mix(in srgb,#ffffff 51%,#000000),0 5px 0 color-mix(in srgb,#ff6700 53%,#000000),1px 6px 3px color-mix(in srgb,color-mix(in srgb,#ffffff 0%,#000000) 73%,transparent),inset 0 1px 0 color-mix(in srgb,color-mix(in srgb,#ffffff 100%,#000000) 53%,transparent);transform:translateY(-3px);touch-action:manipulation}
.key:before{content:'';position:absolute;inset:2px 3px 4px;border-radius:3px;background:radial-gradient(ellipse at 50% 65%,color-mix(in srgb,#ff6700 37%,#ffffff),color-mix(in srgb,#ff6700 21%,#ffffff) 75%);box-shadow:inset 0 1px 2px color-mix(in srgb,color-mix(in srgb,#ffffff 100%,#000000) 60%,transparent),0 1px 1px color-mix(in srgb,color-mix(in srgb,#ffffff 100%,#000000) 27%,transparent);z-index:0}.key-legend{position:relative;z-index:1;pointer-events:none}.key small{position:absolute;top:2px;left:5px;font:6px var(--mono);z-index:1;opacity:.65;pointer-events:none}.key.red{--cap:color-mix(in srgb,#ff6700 70%,#ffffff);--rim:color-mix(in srgb,#ff6700 87%,#000000)}.key.purple{--cap:color-mix(in srgb,#5e00ff 51%,#ffffff);--rim:#5e00ff}.key.blue{--cap:color-mix(in srgb,#5e00ff 69%,#ffffff);--rim:color-mix(in srgb,#5e00ff 82%,#000000)}.key.green{--cap:color-mix(in srgb,#ffde2b 66%,#ffffff);--rim:color-mix(in srgb,#ffde2b 73%,#000000)}.key.yellow,.key.space{--cap:#ffde2b;--rim:color-mix(in srgb,#ffde2b 81%,#000000)}.key.cyan{--cap:color-mix(in srgb,#5e00ff 71%,#ffffff);--rim:color-mix(in srgb,#5e00ff 79%,#000000)}.key:is(.red,.purple,.blue,.green,.yellow,.cyan,.space){background:var(--rim);box-shadow:0 4px 0 var(--rim),0 5px 0 color-mix(in srgb,#ff6700 39%,#000000),1px 6px 3px color-mix(in srgb,color-mix(in srgb,#ffffff 0%,#000000) 73%,transparent)}.key:is(.red,.purple,.blue,.green,.yellow,.cyan,.space):before{background:radial-gradient(ellipse at 50% 70%,var(--cap),color-mix(in srgb,var(--cap),white 25%));}.key.space:before{inset:2px 5px 4px;border-radius:3px 3px 7px 7px}.key:hover{filter:brightness(1.08)}.key:active,.key.pressed,.key.latched{transform:translateY(1px);translate:none;box-shadow:0 1px 0 color-mix(in srgb,#ff6700 71%,#000000),0 2px 2px color-mix(in srgb,color-mix(in srgb,#ffffff 0%,#000000) 73%,transparent);filter:brightness(.93)}.key.latched:after{content:'';width:3px;height:3px;border-radius:50%;background:color-mix(in srgb,#ffde2b 40%,#ffffff);box-shadow:0 0 4px color-mix(in srgb,#ffde2b 64%,#ffffff);position:absolute;right:4px;bottom:5px}.key:focus-visible{outline:2px solid color-mix(in srgb,#ffffff 100%,#000000);outline-offset:3px}.keyboard-help{text-align:center;font:9px/1.8 var(--mono);color:color-mix(in srgb,#ffffff 35%,#000000);margin:29px 0 8px}.brightness-slider{appearance:none;min-width:0;width:100%;height:2px;flex:1;background:color-mix(in srgb,#ffffff 7%,#000000);cursor:ew-resize}.brightness-slider::-webkit-slider-thumb{appearance:none;width:7px;height:13px;border:2px solid color-mix(in srgb,#ffffff 7%,#000000);background:color-mix(in srgb,#ffde2b 13%,#ffffff)}.clock-window.collapsed .clock-inner{display:none}.power-led.off{background:color-mix(in srgb,#ffffff 22%,#000000);box-shadow:none}.unplugged{opacity:.45;transform:rotate(20deg)}.coffee.steaming:after{content:'〰';position:absolute;top:-23px;left:4px;font-size:26px;color:color-mix(in srgb,#ffffff 100%,#000000)}.evening{background-color:color-mix(in srgb,#ffffff 62%,#000000)}.evening .sunlight{opacity:.15}.star-field{position:relative;height:170px;background:color-mix(in srgb,#ffffff 14%,#000000);border:2px solid color-mix(in srgb,#ffffff 7%,#000000)}.catch-star{position:absolute;left:40%;top:35%;background:none;border:0;color:color-mix(in srgb,#ffde2b 76%,#ffffff);font-size:36px;cursor:pointer}.monitor-logo{cursor:pointer}@media(max-width:760px){.keyboard{min-height:164px;padding:23px 10px 18px;transform:perspective(850px) rotateX(14deg)}.key-row{height:22px;gap:4px;margin-bottom:6px}.key{font-size:8px}.key small{font-size:5px;left:3px}.keyboard-help{font-size:8px}.keyboard-badge{font-size:5px;letter-spacing:.7px}.pixel-pet,.pixel-joystick,.plug,.coffee{display:inline-block;position:relative;left:auto;right:auto;bottom:auto;font-size:29px;margin:18px 14px 0 0}.desktop-hint{max-width:45%;text-align:right}}@media(max-width:460px){.keyboard{min-height:144px;padding:22px 8px 16px;border-bottom-width:7px}.key-row{height:19px;gap:3px;margin-bottom:5px}.key{font-size:6px}.key:before{inset:2px 2px 3px}.key small{font-size:4px;left:2px;top:1px}.keyboard-badge{font-size:4px}.keyboard-help{margin-top:23px}.pixel-pet,.pixel-joystick,.plug,.coffee{font-size:25px;margin-right:17px}}
.monitor-bottom{position:relative;z-index:35}.clock-window{z-index:45}