:root{color-scheme:dark;font:14px Consolas,'Courier New',monospace;color:#f8e8ec;background:#201b29;--pink:#ff879d;--mint:#b1dfbe}*{box-sizing:border-box}body{margin:0;background:linear-gradient(#3d2636,#201b29 550px)}main{max-width:1000px;padding:0 18px;margin:auto}button,a{-webkit-tap-highlight-color:transparent}button{font:700 12px Consolas,monospace;background:#453242;color:#ffe9ef;border:2px solid #a87688;min-height:44px;padding:10px 13px;cursor:pointer;box-shadow:3px 3px 0 #110f19}button:hover{border-color:#ffd29d}button:disabled{opacity:.4;cursor:default}button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #110f19}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #ffd29d;outline-offset:3px}a{color:#ffb0c2;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}header{display:flex;align-items:center;gap:10px;min-height:66px;font-size:11px}header>span{flex:1;text-align:center;color:#d6a5b7}header button{min-width:44px;font-size:18px}.mast{text-align:center;margin:18px 0 26px}.mast small{font-size:9px;letter-spacing:2px;color:var(--pink)}h1{font-size:clamp(31px,6vw,55px);letter-spacing:-2px;margin:9px 0}h1 span{color:var(--pink)}.mast p{font-size:12px;color:#d5adbd}.layout{display:grid;grid-template-columns:minmax(330px,1fr) minmax(270px,.8fr);gap:27px;align-items:start}.phone{padding:20px;background:#986c7f;border:4px solid #c794a1;box-shadow:8px 8px 0 #110f19,inset -8px -8px 0 #6f4a61,inset 6px 6px 0 #bd8d9b}.phone-top{display:flex;align-items:center;gap:13px;font-size:10px;color:#2d2334;font-weight:bold;margin-bottom:17px}.speaker{flex:1;height:17px;background:repeating-linear-gradient(90deg,#503c50 0 3px,#bd8d9b 3px 7px)}#led{width:8px;height:8px;background:#5b3f50}body.calling #led{background:#b9f9bc;box-shadow:0 0 8px #9df2b1}.screen{background:#b8ccaa;color:#243929;border:5px solid #3f3445;padding:13px;box-shadow:inset 3px 3px 0 #708b72;min-height:310px}.screen-top,.screen-bottom{display:flex;justify-content:space-between;gap:8px;font-size:10px;border-bottom:1px solid #526a4c;padding-bottom:7px;font-weight:bold}.screen h2{font-size:13px;margin:12px 0 7px;letter-spacing:.5px}pre{font:12px/1.65 Consolas,monospace;white-space:pre-wrap;margin:0;min-height:148px;overflow-wrap:anywhere}#notice{font-size:10px;line-height:1.4;min-height:29px;margin:8px 0 5px;color:#4c392c}.screen-bottom{border:0;border-top:1px solid #526a4c;padding:7px 0 0}#readProgress{height:3px;background:#91aa85;margin-top:8px}#readProgress i{display:block;height:100%;background:#4c6a48;width:0}#keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:19px;touch-action:manipulation}#keypad button{background:#ead3ce;border-color:#fbe6dc;color:#3a293c;font-size:25px;min-height:66px;padding:6px;box-shadow:4px 4px 0 #4c354c,inset -3px -3px 0 #b99caa}#keypad button.active{background:#ffd29b;transform:translate(2px,2px)}#keypad small{display:block;font-size:8px;letter-spacing:1px;margin-top:2px}#keypad button[data-key="0"] small{font-size:6px;letter-spacing:0}.phone-foot{display:flex;justify-content:space-between;font-size:7px;gap:10px;color:#392939;margin-top:17px}.paper{padding:21px;border:2px solid #765064;background:#302331;box-shadow:5px 5px 0 #150f1c;margin-bottom:17px}.paper>small{font-size:8px;letter-spacing:1px;color:var(--pink)}.paper h2{font-size:23px;line-height:1.1;color:#ffe5d4}.paper p{font-size:12px;line-height:1.7;color:#e2bfcb}.actions{display:grid;gap:10px;margin:18px 0}.primary{background:#dd526f;border-color:#ff99ad}.hint{font-size:10px!important;color:#bd95ab!important}#record,#challenge{color:#f0c98c}.memo h3{font-size:11px;color:#eec899;letter-spacing:1px}.memo{background:#3c2d38}.memo p{font-size:11px}summary{cursor:pointer;font-size:10px;min-height:44px;display:flex;align-items:center;color:var(--mint)}ol{padding-left:24px;font-size:10px;line-height:1.8;color:#dab3c5;max-height:230px;overflow:auto}#offline,.home{width:100%;justify-content:center;text-align:center;font-size:10px}#share,#png{font-size:10px;margin:4px 0}#shareStatus{overflow-wrap:anywhere}#answers{border:2px solid #b1dfbe;padding:12px;margin-top:12px;text-align:center;background:#302331}#answers p{font-size:12px}#answers button{min-width:75px;margin:4px}[hidden]{display:none!important}footer{padding:25px 0;text-align:center;font-size:9px;color:#a77f96}@media(max-width:700px){main{padding:0 12px}header{min-height:55px;font-size:9px}header>span{font-size:8px}.mast{margin:8px 0 16px}.mast p{font-size:10px}.mast small{font-size:7px}h1{font-size:33px}.layout{display:flex;flex-direction:column;gap:18px}.phone{width:100%;padding:14px}.screen{min-height:290px;padding:11px}pre{font-size:11px;min-height:135px}#keypad{gap:8px;margin-top:14px}#keypad button{min-height:59px;font-size:23px}.phone-top{font-size:8px;margin-bottom:12px}aside{width:100%}.paper{padding:17px}body:not(.calling) .layout aside{order:-1}body:not(.calling) .memo{display:none}body:not(.calling) .phone{opacity:.85}.paper h2{font-size:22px}.actions{grid-template-columns:1fr 1fr}.actions button{font-size:10px;padding:8px}.paper .hint{line-height:1.6}body.calling #panel .hint{display:none}body.calling #panelTitle{font-size:16px}body.calling #intro{font-size:11px}body.calling .paper{padding:13px}body.calling .mast{display:none}body.calling header{min-height:51px}#record{font-size:10px}}

/* Stable screen: long voice menus scroll instead of moving the keypad. */
pre{height:180px;min-height:180px;max-height:180px;overflow-y:auto;scrollbar-color:#6c855d #b8ccaa;scrollbar-width:thin}@media(max-width:700px){pre{height:160px;min-height:160px;max-height:160px}}