:root{--paper:#f3eee7;--ink:#302d2a;--muted:#7b746f;--rose:#d8a0ac;--board-light:#f0c7d0;--board:#ddaab7;--board-dark:#af7486;--board-rim:#f8dce3;--accent:#9c516c;color-scheme:light;font-family:Pretendard,SUIT,"Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0;word-break:keep-all;overflow-wrap:break-word}button,input{font:inherit}button{color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #90546c;outline-offset:6px}button{touch-action:manipulation}a{color:inherit}.page{max-width:1600px;margin:auto;padding:30px 48px 24px;min-height:100svh;display:flex;flex-direction:column}header{display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;font-weight:800;font-size:24px;letter-spacing:-1px}.brand-symbol{border:1.5px solid currentColor;border-radius:10px;font-size:25px;height:43px;width:43px;text-align:center;line-height:39px;box-shadow:0 3px 0 #cec5b9}.brand small{display:block;font-size:10px;letter-spacing:2px;margin-top:2px;font-weight:650}.sound-button{background:transparent;border:1px solid #d9d1c8;border-radius:30px;height:43px;padding:0 17px;display:flex;align-items:center;gap:9px;font-size:13px}.sound-button #sound-icon{font-size:22px}.sound-button[aria-pressed=true]{color:var(--muted)}main{flex:1;display:flex;flex-direction:column;align-items:center}.intro{text-align:center;margin-top:37px}.eyebrow{font-size:10px;letter-spacing:2.6px;color:#968c82;margin:0 0 9px;font-weight:600}h1{font-size:32px;line-height:1.6;font-weight:650;letter-spacing:-1.2px;margin:0}.intro>p:last-child{font-size:14px;color:var(--muted);margin:8px 0 0;line-height:1.6}.playground{width:100%;display:flex;align-items:center;flex-direction:column}.keyboard-wrap{width:600px;height:405px;display:grid;place-items:center;perspective:1300px;margin-top:0;animation:arrive .7s cubic-bezier(.2,.7,.2,1) both}.keyboard{position:relative;width:515px;height:340px;background:linear-gradient(150deg,var(--board-light),var(--board) 65%,var(--board-dark));border-radius:32px;transform:rotateX(28deg) rotateZ(-7deg);border:2px solid var(--board-rim);box-shadow:inset 0 2px 3px #ffffffc0,inset 0 -3px 2px #59334625,0 2px 0 var(--board-dark),0 5px 0 var(--board-dark),0 8px 0 var(--board-dark),0 11px 0 var(--board-dark),0 14px 0 #845867,7px 28px 21px -5px #704c4929,16px 48px 45px -12px #6b514334;transition:background .3s;user-select:none;--key-size:132px;--key-y:25px}.board-mark{position:absolute;left:32px;top:31px;font-size:17px;letter-spacing:3px;line-height:1.05;font-weight:800;color:#58424d75;text-shadow:0 1px 0 #ffffff80}.board-mark span{display:block;font-size:8px;letter-spacing:.8px;font-weight:500;margin-top:12px}.board-status{position:absolute;right:29px;top:49px;display:flex;flex-direction:column;align-items:flex-start;gap:9px;transform:rotate(0deg);font-size:8px;letter-spacing:1px;color:#60424e99}.led{width:6px;height:6px;background:#847970;border-radius:50%;box-shadow:inset 0 1px 3px #54373290}.led.playing{background:#faffe6;box-shadow:0 0 10px #ffffc2,0 0 20px #fffbda}.key{padding:0;background:none;border:0;position:absolute;width:var(--key-size);height:var(--key-size);isolation:isolate;touch-action:none;outline-offset:8px;border-radius:18px}.key-up{top:20px;left:190px}.key-left{top:174px;left:33px}.key-down{top:174px;left:190px}.key-right{top:174px;left:347px}.key-body{position:absolute;inset:6px -3px -7px;border-radius:17px;background:#6f5557;box-shadow:0 4px 7px #64484c50,0 0 0 3px #b6889460}.key-top{position:absolute;inset:0;display:block;overflow:hidden;transform:translateY(-14px);border-radius:16px;background:linear-gradient(135deg,#fffdf7,#efebe2 65%,#e2ddd4);border:1px solid #fffefb;box-shadow:inset 3px 3px 4px #fff,inset -3px -3px 4px #b7b0a660,0 2px 0 #e5ded4,0 4px 0 #ddd5ca,0 6px 0 #d5ccbf,0 8px 0 #c9c0b4,0 10px 0 #b6aa9d,0 13px 0 #9f9285,3px 17px 6px #5d45433b;transition:transform .11s cubic-bezier(.2,.8,.3,1),box-shadow .11s,filter .2s}.key-top:after{content:"";position:absolute;inset:4px 7px 9px;border-radius:12px;box-shadow:inset 1px 1px 5px #ffffffad,inset -2px -2px 7px #92887514;pointer-events:none}.key-top img{width:106px;height:106px;position:absolute;left:12px;top:0;object-fit:contain;mix-blend-mode:multiply;user-select:none;pointer-events:none}.key-legend{position:absolute;bottom:9px;left:0;right:0;text-align:center;font-size:21px;line-height:1;color:#635e56}.key:hover .key-top{filter:brightness(1.04);transform:translateY(-17px)}.key.pressed .key-top,.key:active .key-top{transform:translateY(-2px);box-shadow:inset 2px 2px 4px #fff,inset -3px -3px 4px #b7b0a655,0 2px 0 #c4b9ab,0 3px 0 #a99b8d,1px 5px 4px #5d454330}.key.looping .key-top{animation:key-rumble .18s infinite alternate}.board-edge{position:absolute;bottom:7px;left:0;right:0;text-align:center;font-size:7px;letter-spacing:1.2px;color:#6c485653}.now-playing{height:35px;display:flex;align-items:center;justify-content:center;gap:11px;margin-top:-6px}.now-playing p{font-size:14px;color:#82746e;margin:0}.wave{display:flex;align-items:center;gap:3px;height:20px}.wave i{width:3px;height:3px;background:#bda9a1;border-radius:2px;transition:height .2s}.wave.active i{background:var(--accent);animation:wave .55s infinite alternate}.wave.active i:nth-child(2){animation-delay:-.2s}.wave.active i:nth-child(3){animation-delay:-.4s}.wave.active i:nth-child(4){animation-delay:-.3s}.wave.active i:nth-child(5){animation-delay:-.1s}.controls{display:flex;align-items:center;justify-content:center;gap:27px;border-top:1px solid #dcd4cb;border-bottom:1px solid #dcd4cb;padding:21px 2px;margin-top:25px}.control-group{display:flex;align-items:center;gap:13px}.control-label{font-size:12px;color:#7a7067;white-space:nowrap}.segmented{display:flex;background:#e7e0d7;border-radius:9px;padding:3px}.segmented button{background:transparent;border:0;border-radius:6px;font-size:12px;padding:9px 11px;min-height:36px;color:#928478}.segmented button.selected{background:#fffdf7;box-shadow:0 2px 4px #614c3612;color:#413931}.swatches{display:flex;gap:8px}.swatch{width:22px;height:22px;border-radius:50%;background:var(--swatch);border:3px solid var(--paper);box-shadow:0 0 0 1px transparent;padding:0;position:relative}.swatch:before{content:"";position:absolute;inset:-10px}.swatch.selected{box-shadow:0 0 0 1px #7f6d65}.volume-control{gap:9px}input[type=range]{appearance:none;width:83px;height:3px;background:linear-gradient(to right,#71655b 65%,#d5cbc0 65%);border-radius:3px;cursor:pointer;margin:0 4px;touch-action:pan-x}input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;background:#6b5d52;border:2px solid var(--paper);border-radius:50%;box-shadow:0 0 0 1px #87756a}input[type=range]::-moz-range-thumb{width:10px;height:10px;background:#6b5d52;border:2px solid var(--paper);border-radius:50%}output{font-size:10px;color:#86786c;font-variant-numeric:tabular-nums;min-width:19px}.hint{font-size:12px;color:#948679;margin:17px 0 28px}.error{font-size:13px;color:#934756;max-width:480px;text-align:center;line-height:1.6}footer{display:flex;justify-content:space-between;font-size:11px;color:#a29487;padding-top:18px;gap:20px;line-height:1.5}footer a{text-decoration:none;color:#776759}footer a:hover{text-decoration:underline}[data-palette=sage]{--board-light:#d3dfc9;--board:#b1c1a8;--board-dark:#85967d;--board-rim:#e3edda;--accent:#648052}[data-palette=ink]{--board-light:#b9c4d6;--board:#8f9bb3;--board-dark:#65718a;--board-rim:#dce2ed;--accent:#606c8c}@keyframes arrive{from{opacity:0;translate:0 15px}to{opacity:1;translate:0 0}}@keyframes key-rumble{from{transform:translateY(-2px)}to{transform:translateY(-4px)}}@keyframes wave{from{height:4px}to{height:17px}}@media(min-height:950px) and (min-width:700px){.intro{margin-top:64px}.keyboard-wrap{height:460px;width:680px}.keyboard{scale:1.12}.controls{margin-top:36px}}@media(max-width:700px){.page{padding:20px 23px 22px}.brand{font-size:21px}.brand-symbol{width:37px;height:37px;font-size:23px;line-height:33px}.brand small{font-size:8px}.sound-button{height:39px;padding:0 12px;font-size:12px}.intro{margin-top:40px}h1{font-size:27px}.intro>p:last-child{font-size:12px;max-width:265px;margin:9px auto 0;line-height:1.7}.eyebrow{font-size:8px;letter-spacing:2px}.keyboard-wrap{width:100%;height:320px;margin-top:4px}.keyboard{scale:.69}.now-playing{margin-top:0}.now-playing p{font-size:13px}.controls{max-width:350px;flex-wrap:wrap;column-gap:26px;row-gap:20px;margin-top:22px;padding:20px 0}.hold-control{flex:0 0 100%;justify-content:center}.control-label{font-size:12px}.segmented button{font-size:13px;min-height:38px}.volume-control{gap:7px}.hint{font-size:11px;margin-top:18px}footer{margin-top:20px;flex-direction:column;align-items:center;gap:6px;font-size:10px}}@media(max-width:365px){.page{padding-left:16px;padding-right:16px}.keyboard{scale:.60}.keyboard-wrap{height:282px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* Comfortable controls; the keycaps retain their deliberately small printed legends. */
.intro>p:last-child{font-size:16px}.control-label,.segmented button{font-size:14px}.segmented button{min-height:44px}.controls{gap:25px}.hint{font-size:13px}footer{font-size:12px}.volume-control input[type=range]{height:44px;background:transparent;width:86px}.volume-control input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(to right,#71655b var(--volume,65%),#d5cbc0 var(--volume,65%))}.volume-control input[type=range]::-webkit-slider-thumb{margin-top:-4.5px}.volume-control input[type=range]::-moz-range-track{height:3px;border-radius:3px;background:linear-gradient(to right,#71655b var(--volume,65%),#d5cbc0 var(--volume,65%))}output{font-size:12px}@media(max-width:700px){.intro>p:last-child{font-size:14px;max-width:300px}.controls{gap:20px}.control-label,.segmented button{font-size:14px}.volume-control input[type=range]{width:75px}.hint{font-size:12px}footer{font-size:12px}}
.keyboard-wrap{grid-template-columns:minmax(0,1fr)}
/* Safari needs prefixed selection rules on the full interactive surface. */
.keyboard-wrap,.keyboard-wrap *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.keyboard-wrap img{-webkit-user-drag:none}
@media(max-width:700px){.intro{margin-top:24px}.keyboard-wrap{height:282px;margin-top:0}.controls{margin-top:14px;padding:12px 0;gap:12px 24px}.hint{margin:12px 0 15px}footer{margin-top:auto;padding-top:14px}}

/* A low front perspective and physical, 48px-tall keycap walls. */
.keyboard-wrap{perspective:1100px;perspective-origin:50% 42%}
.keyboard{transform:rotateX(53deg) rotateY(-12deg) rotateZ(-5deg);transform-style:preserve-3d}
.key{isolation:auto;transform-style:preserve-3d;--lift:48px}
.key-up{z-index:1}.key-left,.key-down,.key-right{z-index:2}
.key-body{inset:0 -3px -4px;transform:translateZ(1px);background:#846c65;box-shadow:0 5px 11px #67443c66,0 0 0 4px #a97d884d}
.key-top{transform:translateZ(var(--lift));box-shadow:inset 3px 3px 5px #fff,inset -3px -3px 5px #b7b0a660,0 1px 0 #e7e0d5;backface-visibility:hidden;transition:transform .10s cubic-bezier(.2,.8,.3,1),filter .2s}
.key-side{position:absolute;display:block;pointer-events:none;backface-visibility:hidden;transition:transform .10s cubic-bezier(.2,.8,.3,1)}
.key-front{left:0;top:100%;width:100%;height:48px;transform-origin:center top;transform:translateZ(var(--lift)) rotateX(-90deg);border-radius:0 0 13px 13px;background:linear-gradient(#e5dfd3 0%,#d6cbbb 45%,#b7a794 100%);border:1px solid #c4b7a4;box-shadow:inset 2px 0 4px #ffffff80,inset 0 -4px 5px #85766540}
.key-front:after{content:'';position:absolute;inset:7px 12px 6px;border-bottom:1px solid #f3eadd55;border-radius:9px}
.key-right-wall{left:100%;top:0;width:48px;height:100%;transform-origin:left top;transform:translateZ(var(--lift)) rotateY(90deg);border-radius:0 12px 12px 0;background:linear-gradient(90deg,#c6b8a5,#a3927c);border:1px solid #b3a38e}
.key:hover{--lift:51px}.key:hover .key-top{transform:translateZ(var(--lift))}
.key.pressed,.key:active{--lift:35px}
.key.pressed .key-top,.key:active .key-top{transform:translateZ(var(--lift));box-shadow:inset 2px 2px 4px #fff,inset -3px -3px 4px #b7b0a655,0 1px 0 #d7cec1}
.key.looping .key-top{animation:none}.key.looping{animation:cap-pulse .18s infinite alternate}
@keyframes cap-pulse{to{filter:brightness(1.035)}}
@media(max-width:700px){.keyboard-wrap{perspective:900px}.keyboard{transform:rotateX(49deg) rotateY(-10deg) rotateZ(-5deg)}}

/* Reference angle: diagonal three-quarter view, tapered mechanical keycaps. */
.keyboard-wrap{perspective:1600px;perspective-origin:50% 40%;height:455px}
.keyboard{transform:rotateX(43deg) rotateZ(32deg);scale:.93}
.key-top{inset:10px;transform:translateZ(var(--lift));border-radius:13px}
.key-top:after{inset:3px 4px 5px;border-radius:10px}
.key-top img{width:90px;height:90px;left:10px;top:-3px}
.key-legend{bottom:6px;font-size:19px}
.key-front{top:calc(100% - 10px);height:49px;border-radius:0 0 12px 12px;clip-path:polygon(7.58% 0,92.42% 0,100% 100%,0 100%);transform:translateZ(var(--lift)) rotateX(-78.23deg);background:linear-gradient(110deg,#e3dccf,#c3b6a2 80%)}
.key-right-wall{left:calc(100% - 10px);width:49px;border-radius:0 12px 12px 0;clip-path:polygon(0 7.58%,100% 0,100% 100%,0 92.42%);transform:translateZ(var(--lift)) rotateY(78.23deg);background:linear-gradient(90deg,#cfc3b1,#ab9b83)}
.key-front:after{display:none}
@media(min-height:950px) and (min-width:700px){.keyboard-wrap{height:500px}.keyboard{scale:1.03}}
@media(max-width:700px){.keyboard-wrap{height:340px;perspective:1300px}.keyboard{transform:rotateX(43deg) rotateZ(32deg);scale:.61}}
@media(max-width:365px){.keyboard{scale:.53}.keyboard-wrap{height:305px}}