:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;color:#f5eddf;background:#101426}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:2px solid #f4cb8a;outline-offset:5px}button{border:1px solid #ffffff30;background:#ffffff08;border-radius:4px;padding:12px 18px;transition:background .2s,transform .2s}button:hover{background:#ffffff18;transform:translateY(-1px)}a{color:inherit;text-decoration:none}#app{position:relative;width:100vw;height:100dvh;min-height:350px;overflow:hidden}canvas{width:100%;height:100%;display:block}header{position:absolute;top:0;left:0;width:100%;padding:28px 4%;display:flex;justify-content:space-between;align-items:center;z-index:3}.brand{font:28px Georgia,serif;letter-spacing:7px}.brand span{display:block;font:7px Arial;letter-spacing:3px;margin-top:5px}.header-right{display:flex;align-items:center;gap:20px;font-size:10px;letter-spacing:1.5px}#signin{color:#e6c38e}#mute{font-size:9px;border:0;padding:10px}#pause{font-size:18px;padding:5px 12px}#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,#1013296b,transparent,#10132945);z-index:2;text-align:center;padding:95px 20px 50px}#overlay[hidden], [hidden]{display:none!important}#panel{max-width:720px;width:100%;animation:arrive .8s ease both}.eyebrow{font-size:10px;letter-spacing:5px;color:#e7c994;display:block}.hero-title{font:clamp(90px,15vw,180px)/1 Georgia,serif;letter-spacing:.18em;margin:20px 0 8px;padding-left:.18em;text-shadow:0 0 70px #d8c5ff60;font-weight:normal}.subtitle{font:11px Arial;letter-spacing:5px;color:#ece2db;margin-bottom:30px}p{font:15px/1.9 Georgia,serif;color:#d5d0df;max-width:480px;margin:18px auto 28px}h2{font:normal clamp(32px,5vw,58px) Georgia,serif;margin:22px 0}.primary{background:#e9d2a8;color:#252438;border-color:#e9d2a8;letter-spacing:2px;font-size:11px;min-width:220px;padding:18px 30px;box-shadow:0 0 35px #e9c98c22}.primary:hover{background:#ffe8bf}.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.secondary{display:block;margin:18px auto;border:0;font-size:10px;letter-spacing:2px;color:#d1c7e0}.controls{display:flex;justify-content:center;gap:28px;font-size:9px;letter-spacing:1px;color:#b8b7ce;margin-top:40px}kbd{font:10px Arial;display:inline-block;border:1px solid #ffffff40;border-radius:3px;padding:5px 7px;margin-right:4px;color:#f4e9d7;background:#15172d55}.chapter-dots{margin-top:30px;letter-spacing:10px;color:#b7acc5;font-size:9px}footer{position:absolute;bottom:24px;left:4%;right:4%;display:flex;justify-content:space-between;font-size:8px;letter-spacing:2px;color:#b9b7ce;pointer-events:none}.tiny-star{color:#edcf9b;margin-left:10px}#hud{position:absolute;top:110px;left:4%;right:4%;display:flex;justify-content:space-between;align-items:center;pointer-events:none}#hud strong{display:block;font:24px Georgia;margin-top:8px}#hud .eyebrow{font-size:8px;letter-spacing:3px}.stats{display:flex;gap:25px;font-size:13px;color:#f4d5a2}#world{pointer-events:auto;font-size:10px;letter-spacing:2px;background:#17182c90}#world kbd{margin-left:10px}#toast{position:absolute;bottom:95px;left:50%;transform:translateX(-50%);background:#101629dc;border:1px solid #eed4a83a;border-radius:5px;padding:13px 22px;font-size:12px;opacity:0;transition:opacity .3s;z-index:4;pointer-events:none;text-align:center;max-width:90%}#toast.show{opacity:1}#touch{position:absolute;bottom:22px;left:20px;right:20px;justify-content:space-between;display:flex;z-index:4;pointer-events:none}#touch div{display:flex;gap:12px}#touch button{pointer-events:auto;width:55px;height:55px;border-radius:50%;background:#151b3a88;font-size:23px;touch-action:none;user-select:none}ol{text-align:left;max-width:420px;margin:20px auto;padding:0;list-style:none}li{display:flex;justify-content:space-between;border-bottom:1px solid #ffffff15;padding:12px;font-size:12px}.result{color:#f1ce90;font:20px Georgia;margin:18px}.note{font-size:11px;color:#aaa6bd;line-height:1.6}@keyframes arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media(max-width:650px){header{padding:20px}.brand{font-size:22px}.header-right{gap:10px}#identity{display:none}.header-right a{font-size:9px}#hud{top:90px;left:20px;right:20px}#hud strong{font-size:17px}.stats{gap:10px;font-size:11px;flex-direction:column}#world{padding:10px;font-size:9px}#world kbd{display:none}.hero-title{font-size:100px}.subtitle{font-size:8px;letter-spacing:2.5px}.controls{gap:12px;margin-top:24px;font-size:8px}footer{font-size:6px;letter-spacing:1px}footer span:nth-child(2){display:none}p{font-size:14px;max-width:340px}#panel{max-height:100%;overflow:auto}.eyebrow{font-size:8px;letter-spacing:3px}}@media(pointer:coarse){#footer{display:none}#touch:not([hidden]){display:flex}.controls{display:none}}


#lesson{position:absolute;top:200px;left:4%;max-width:390px;width:85%;padding:20px 24px;background:#11172bba;border:1px solid #e6cd9b30;border-radius:5px;pointer-events:none;z-index:1}#lesson .eyebrow{font-size:8px;letter-spacing:2px}#lesson strong{display:block;font:23px Georgia,serif;margin:10px 0}#lesson>span:last-child{display:block;font-size:12px;line-height:1.7;color:#d6d0df}@media(max-width:650px){#lesson{top:185px;left:20px;padding:13px 17px;max-width:330px}#lesson strong{font-size:19px;margin:6px 0}#lesson>span:last-child{font-size:11px}}