:root{font-family:Arial,Helvetica,sans-serif;color:#f3f4f1;background:#091b2d;color-scheme:dark}*{box-sizing:border-box}body{margin:0}header{height:100px;display:flex;justify-content:space-between;align-items:center;padding:0 5%;border-bottom:1px solid #ffffff13}.brand{display:flex;align-items:center;gap:14px;font-size:14px;font-weight:700;letter-spacing:.12em}.brand small{display:block;font-size:20px;letter-spacing:.07em;margin-top:5px}.monogram{border:1px solid #cfaa62;color:#d8b776;font-family:Georgia,serif;font-size:30px;width:48px;height:48px;display:grid;place-items:center}.edition,.eyebrow{font-size:12px;letter-spacing:.18em;color:#d3b579}main{max-width:1600px;margin:auto;display:grid;grid-template-columns:62% 38%;min-height:calc(100svh - 150px)}.stage{position:relative;min-height:680px;background:radial-gradient(ellipse at 50% 48%,#23415a 0%,#102b40 43%,#091b2d 72%)}canvas{width:100%;height:100%;position:absolute;inset:0;touch-action:none;cursor:grab;outline-offset:-5px}canvas:active{cursor:grabbing}#loading{position:absolute;top:48%;width:100%;text-align:center;color:#d8b776;pointer-events:none}.stage-note{position:absolute;bottom:25px;width:100%;text-align:center;font-size:12px;color:#8095a6;letter-spacing:.18em;pointer-events:none}aside{padding:65px 13% 40px 5%;align-self:center}h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(42px,4.2vw,68px);line-height:1.05;letter-spacing:-.03em;margin:22px 0 26px}.instruction{font-size:16px;line-height:1.8;color:#a8bac8}.result{margin:40px 0 24px}#status{font-size:12px;letter-spacing:.16em;color:#a4b5c0}.result strong{display:block;font-family:Georgia,serif;font-weight:400;font-size:32px;min-height:76px;padding-top:12px;color:#e2c58d}.line{height:2px;background:#ffffff1c;margin-top:12px}.line i{display:block;height:100%;background:#dfbf80;width:0;transition:width .1s}button{font:inherit;cursor:pointer}#spin{width:100%;padding:19px 20px;background:#dbba77;border:0;color:#10283a;font-weight:700;font-size:16px;border-radius:3px}#spin:hover{background:#efcf92}button:disabled{opacity:.5;cursor:wait}.secondary{display:flex;align-items:center;justify-content:space-between;margin-top:15px;color:#8299aa;font-size:14px}.secondary button{background:none;color:#c6d1d9;border:0;padding:10px 0}.view{margin-top:35px;display:flex;align-items:center;gap:18px;font-size:14px;color:#b5c5d0}.view input{width:45%;accent-color:#dabc81}.keyboard{font-size:12px;color:#8197a6;margin-top:18px}footer{height:50px;display:flex;justify-content:space-between;align-items:center;padding:0 5%;font-size:12px;letter-spacing:.1em;color:#7690a4;border-top:1px solid #ffffff13}#error{font-size:14px;color:#ffbb99}@media(max-width:800px){header{height:78px;padding:0 6%}.edition{display:none}main{display:flex;flex-direction:column}.stage{min-height:480px;height:65svh;max-height:740px}.stage-note{bottom:12px}aside{width:100%;padding:28px 7% 38px}h1{font-size:43px;margin:15px 0}.result{margin:28px 0 20px}.result strong{min-height:58px}footer{font-size:10px;padding:0 7%}}@media(prefers-reduced-motion:reduce){.line i{transition:none}}

.download{background:transparent;border:1px solid #ffffff25;color:#a8bac8;font-size:14px;padding:10px 15px;margin-top:10px;border-radius:3px}.download:hover{border-color:#dabc81;color:#e2c58d}
