:root{font-family:Arial,sans-serif;color:#203632;background:#eeeae0;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{min-height:100vh;width:100%}header{padding:24px 4vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #bdc5ba;font-size:12px;letter-spacing:2px}button,input,select,textarea{font:inherit}button{border:1px solid #a9b5aa;background:#fffdf6;color:#234338;padding:10px 14px;border-radius:5px;cursor:pointer;transition:background .16s,transform .16s}button:hover{background:#d8e7d7;transform:translateY(-1px)}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #dc704d;outline-offset:3px}input,select{display:block;width:100%;min-width:55px;padding:9px;background:#fffdf8;border:1px solid #bbc4b6;border-radius:4px;margin-top:5px}input[type=color]{height:39px}label{display:block;font-size:12px;margin:10px 0;color:#55675f;min-width:0}.intro{padding:42px 4vw;display:flex;justify-content:space-between;align-items:end;gap:30px}.intro p{line-height:1.7;font-size:14px}.eyebrow{font-size:10px!important;letter-spacing:2px;font-weight:700}h1{font-family:Georgia,serif;font-size:clamp(34px,5vw,75px);font-weight:400;line-height:1.03;margin:20px 0 0}h1 em{color:#c65d3b}h2{font-family:Georgia,serif;font-size:26px;font-weight:400;margin:12px 0}h3{font-size:14px;margin-top:24px}p{line-height:1.6}.layout{display:grid;grid-template-columns:260px 1fr;gap:26px;padding:0 4vw 30px}aside{background:#e0e5d9;padding:24px;border-radius:10px}aside button{display:block;width:100%;margin:8px 0;text-align:left}aside p,.stage>p{font-size:12px;color:#657169}.legend{font-size:12px;display:grid;gap:7px;margin:20px 0}.legend span:first-child{color:#c65d3b}.stage{background:#f7f4e9;padding:24px;border-radius:12px;min-width:0}.stagehead{display:flex;justify-content:space-between;align-items:center;gap:20px}.stagehead>b{font-size:11px;letter-spacing:1px}.comic svg{width:100%;height:auto;display:block}.comic{margin-top:20px}.status{background:#dae5d7!important;padding:15px;color:#2e4c3e!important;border-radius:4px}.empty{text-align:center;padding:80px 10px}.empty>span{font-size:65px}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.row label{flex:1}.author{padding:28px 4vw;border-top:1px solid #c6cdbf}.parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:15px;margin-top:20px}article{background:#f8f6ee;padding:18px;border:1px solid #d3d7c9;border-radius:8px}article>b{font-size:11px;letter-spacing:1px}.step{margin:15px 0}.badge{border-radius:50%;background:#25463c;color:#fff;padding:13px 17px}.op{display:grid;grid-template-columns:1.5fr 1.2fr repeat(7,1fr) 1fr;gap:8px;align-items:end;border-top:1px solid #d4d9cf}.op button{margin-bottom:10px;padding:9px;font-size:11px}.step>.row:last-child{margin-top:10px}.step>.row:last-child button{font-size:10px;padding:7px}.source{padding:30px 4vw;background:#dfe5d7;display:grid;grid-template-columns:1fr 1fr;gap:40px}.source p{font-size:13px}textarea{width:100%;min-height:320px;background:#17392e;color:#e5f3d8;padding:20px;border:0;border-radius:7px;font:12px/1.6 monospace;resize:vertical}footer{padding:30px 4vw;font-size:12px;color:#617165}footer p{max-width:1000px}footer small{display:block;margin-top:25px}@media(max-width:1000px){.op{grid-template-columns:repeat(4,1fr)}.layout{grid-template-columns:210px 1fr}}@media(max-width:700px){.layout,.source{grid-template-columns:1fr}.intro{display:block}header span{display:none}.stagehead{flex-wrap:wrap}.op{grid-template-columns:repeat(3,1fr)}.comic{overflow:auto}.comic svg{min-width:650px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}button:hover{transform:none}}.focused .intro,.focused .author,.focused .source,.focused footer{display:none}.focused .layout{padding-top:24px;min-height:calc(100vh - 100px)}h2,label,small{overflow-wrap:anywhere}input,textarea{white-space:pre-wrap}
