:root{--wood:#C8823C;--wood-deep:#8A5522;--night:#17110D;--keycap:#241A13;--cream:#F7F1E8;--sky:#E86FA8;--azure:#1C6BBF;--azure-deep:#11487F;--ink:#1B1511;--muted:#6E6056;--bar-h:calc(130px + env(safe-area-inset-bottom));--sheet-h:min(60dvh,430px);--app-w:430px;}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:var(--night);color:var(--cream);font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow:hidden;overscroll-behavior:none;}.field{position:fixed;inset:0;background: radial-gradient(120% 70% at 50% 0%,#3A2415 0%,#17110D 62%,#120C09 100%);z-index:0;}.field::after{content:"";position:absolute;inset:0;background: radial-gradient(60% 40% at 50% 92%,rgba(0,0,0,.5) 0%,transparent 100%);opacity:.85;}.app{position:relative;z-index:1;width:100%;max-width:var(--app-w);margin:0 auto;height:100dvh;padding:calc(18px + env(safe-area-inset-top)) 20px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;}.stage{will-change:transform;transform-origin:50% 22%;display:flex;flex-direction:column;align-items:center;width:100%;}.logo{width:144px;height:144px;max-width:38vw;border-radius:30px;display:block;box-shadow:0 10px 0 rgba(0,0,0,.35),0 22px 44px rgba(0,0,0,.5);}h1{font-family:"Anybody","DM Sans",system-ui,sans-serif;font-variation-settings:"wdth" 125;font-weight:700;font-size:clamp(1.55rem,1.18rem + 2.1vw,2.3rem);line-height:1.08;letter-spacing:-0.015em;margin-top:18px;text-wrap:balance;}h1 .hl{color:var(--wood)}.sub{margin-top:12px;font-size:clamp(0.92rem,0.86rem + 0.35vw,1.02rem);line-height:1.5;color:#CBB9A8;max-width:34ch;}.keys{margin-top:20px;display:flex;gap:9px;align-items:flex-end;justify-content:center;}.cap{width:54px;height:52px;border-radius:12px;background:linear-gradient(180deg,#2E2219 0%,var(--keycap) 100%);border:1px solid rgba(247,241,232,.09);box-shadow:0 5px 0 #0D0906,0 10px 18px rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;font-family:"Anybody","DM Sans",sans-serif;font-variation-settings:"wdth" 125;font-weight:700;font-size:.95rem;color:#E9D9C6;}.cap.lit{background:linear-gradient(180deg,#D99551 0%,var(--wood) 100%);color:#2A1708;box-shadow:0 5px 0 var(--wood-deep),0 10px 18px rgba(0,0,0,.45);}.cap.esc{width:72px;font-size:.82rem;letter-spacing:.06em;background:linear-gradient(180deg,#F081B5 0%,var(--sky) 100%);color:#45102A;box-shadow:0 5px 0 #B8406F,0 10px 18px rgba(0,0,0,.45);}.sheet{position:fixed;left:50%;bottom:var(--bar-h);width:min(100%,var(--app-w));height:var(--sheet-h);z-index:3;background:var(--cream);color:var(--ink);border-radius:26px 26px 0 0;box-shadow:0 -2px 0 rgba(0,0,0,.06),0 -12px 30px rgba(0,0,0,.42),0 -34px 70px rgba(0,0,0,.35);transform:translate(-50%,0);will-change:transform;touch-action:none;user-select:none;-webkit-user-select:none;overscroll-behavior:contain;padding:0 16px;display:flex;flex-direction:column;}.handle{all:unset;display:block;width:100%;padding:9px 0 2px;cursor:grab;text-align:center;}.handle:focus-visible{outline:2px solid var(--azure);outline-offset:-4px;border-radius:14px}.grabber{display:block;width:38px;height:5px;border-radius:3px;background:#C9BCAE;margin:0 auto;}.sheet-head{display:block;padding:8px 4px 12px;text-align:left;}.sheet-title{display:block;font-family:"Anybody","DM Sans",sans-serif;font-variation-settings:"wdth" 125;font-weight:700;font-size:1.14rem;letter-spacing:-0.01em;}.sheet-note{display:block;margin-top:3px;font-size:.82rem;color:var(--muted);}.list{list-style:none;display:flex;flex-direction:column;gap:8px}.row{display:flex;align-items:center;gap:12px;background:#FFFFFF;border:1px solid #E7DED2;border-radius:18px;padding:11px 13px;min-height:60px;box-shadow:0 1px 2px rgba(27,21,17,.05),0 6px 14px rgba(27,21,17,.05);transition:transform .12s ease-out;will-change:transform;}.row.press{transform:scale(0.97)}.mark{display:grid;flex:0 0 auto;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#F2E7D9;}.mark svg{display:block}.row-text{display:block;flex:1 1 auto;text-align:left;min-width:0}.row-name{display:block;font-weight:600;font-size:.96rem;line-height:1.2}.row-sub{display:block;font-size:.78rem;color:var(--muted);margin-top:2px}.chip{flex:0 0 auto;font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:5px 9px;border-radius:999px;background:var(--azure);color:#fff;}.chip.quiet{background:#EDE3D6;color:var(--muted)}.sheet.collapsed .row:nth-child(n+2),.sheet.collapsed .sheet-foot{opacity:0;visibility:hidden;}.row,.sheet-foot{transition:opacity .18s ease-out,transform .12s ease-out}.sheet-foot{padding:12px 4px 10px;font-size:.78rem;color:var(--muted);text-align:left;}.actions{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,var(--app-w));z-index:4;background:linear-gradient(180deg,rgba(23,17,13,0) 0%,#17110D 22%,#17110D 100%);padding:18px 20px calc(14px + env(safe-area-inset-bottom));text-align:center;}.cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;border-radius:18px;background:var(--azure);color:#fff;font-family:"Anybody","DM Sans",sans-serif;font-variation-settings:"wdth" 125;font-weight:700;font-size:1.05rem;letter-spacing:-0.005em;text-decoration:none;box-shadow:0 4px 0 var(--azure-deep),0 12px 26px rgba(0,0,0,.45);transition:transform .12s ease-out;will-change:transform;}.cta:focus-visible{outline:3px solid var(--sky);outline-offset:3px}.cta.press{transform:scale(0.97)}@media (hover:hover) and (pointer:fine){.cta:hover{background:#15589E}.row:hover{border-color:#D8CBBB}}.under{margin-top:11px;font-size:.8rem;line-height:1.4;color:#A99686;}footer{margin-top:8px;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:#9A8574;}@media (max-height:680px){.logo{width:112px;height:112px}h1{margin-top:12px}.keys{margin-top:14px}.cap{height:46px;width:48px}.cap.esc{width:64px}}@media (min-width:860px){.field::after{opacity:.4}.app{box-shadow:0 0 0 1px rgba(247,241,232,.07),0 40px 90px rgba(0,0,0,.55);background:rgba(23,17,13,.55)}}@media (prefers-reduced-motion:reduce){.sheet,.stage{transition:opacity .18s linear}.row,.cta{transition:none}}html,body{max-width:100%;overflow-x:clip}