:root{--paper:#f1ecdf;--red:#b65b44}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font)}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}header{height:100px;margin:0 4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #3945371a;position:relative;z-index:2}.brand{text-decoration:none;color:inherit;display:flex;align-items:center;gap:13px;font-family:var(--font);font-size:16px;letter-spacing:3px;font-weight:700}.brand small{display:block;font-size:8px;letter-spacing:2.4px;font-weight:500;margin-top:5px}.seal{background:var(--red);color:var(--paper);font-family:serif;font-size:25px;line-height:39px;width:35px;text-align:center;border-radius:2px;transform:rotate(-3deg)}.top-note{font-size:12px;color:#858b7e}.export{background:transparent;border:1px solid #cbd0c2;border-radius:6px;padding:12px 17px;font-size:11px}.export span{margin-left:20px}main{height:calc(100dvh - 166px);min-height:520px;position:relative;overflow:hidden}.intro{position:absolute;z-index:1;left:7.5%;top:45px;pointer-events:none}.eyebrow{font-size:9px;letter-spacing:2.2px;color:var(--red)}h1{font-family:Georgia,serif;font-size:clamp(36px,4vw,57px);font-weight:400;letter-spacing:-2px;margin:14px 0 13px}.intro p{font-size:12px;color:#858b7e}.vertical{position:absolute;left:3%;top:200px;writing-mode:vertical-rl;font-size:8px;letter-spacing:3px;color:#8c9286;z-index:1}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}.canvas-label{position:absolute;left:7.5%;bottom:107px;font-size:8px;letter-spacing:1.7px;color:#8b9185;pointer-events:none}.red-dot{display:inline-block;width:5px;height:5px;background:var(--red);border-radius:50%;margin-right:8px}.hint{position:absolute;right:7%;bottom:109px;font-size:10px;color:#909688;pointer-events:none}.tools{position:absolute;bottom:23px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:16px;background:#faf8f1f2;border:1px solid #dadbd1;box-shadow:0 8px 24px #354c3510;border-radius:12px;padding:9px 13px;white-space:nowrap}.tool-group{display:flex;gap:4px}.tool{border:0;border-radius:7px;background:transparent;display:flex;align-items:center;flex-direction:column;gap:5px;font-size:9px;min-width:53px;padding:7px 8px}.tool span{font-size:24px;height:24px;line-height:24px;font-family:Georgia,serif}.tool.active{background:#e4e8dc}.tool:hover,.icon:hover{background:#ecece3}.divider{width:1px;height:34px;background:#dedfd5}.size{font-size:9px;display:flex;flex-direction:column;gap:9px}input{width:75px;accent-color:#64765c;height:3px}.icon{border:0;background:transparent;font-size:23px;width:30px;height:35px;border-radius:5px}footer{height:66px;margin:0 4%;border-top:1px solid #3945371a;display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#8b9185;letter-spacing:1.3px}footer div{display:flex;align-items:center;gap:21px}footer button{border:0;background:transparent;font-size:18px}.infinity{font-size:22px;color:#75836b}.footer-arrow{font-size:17px;margin-left:15px}#toast{position:absolute;bottom:110px;left:50%;transform:translateX(-50%);background:#334637;color:#fff;padding:10px 18px;border-radius:6px;font-size:12px;opacity:0;transition:opacity .2s;pointer-events:none}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--red);outline-offset:3px}@media(max-width:700px){header{height:80px}.top-note{display:none}.brand{font-size:12px}.export{font-size:10px;padding:9px}.export span{margin-left:5px}main{height:calc(100dvh - 134px);min-height:500px}.intro{top:32px}.intro p{max-width:250px;line-height:1.7}.vertical{display:none}.tools{gap:5px;padding:7px;bottom:20px;max-width:96%}.tool{min-width:40px;padding:7px 5px}.size input{width:40px}.divider{margin:0 2px}.icon{width:23px}.hint{display:none}.canvas-label{bottom:100px;font-size:7px}footer{height:54px;letter-spacing:.5px;font-size:7px}footer div{gap:10px}footer>span:last-child{display:none}}

.growth-panel{position:absolute;right:4%;top:30px;z-index:3;width:224px;background:#faf8f1f2;border:1px solid #dadbd1;border-radius:9px;box-shadow:0 5px 20px #354c3510}.growth-panel summary{cursor:pointer;list-style:none;padding:13px 16px;font-size:11px;letter-spacing:.6px;display:flex;justify-content:space-between}.growth-panel summary::-webkit-details-marker{display:none}.growth-panel[open] summary{border-bottom:1px solid #dedfd5}.growth-content{padding:0 15px 15px}.growth-content canvas{width:100%;height:155px;cursor:default;pointer-events:none}.growth-content p{font:italic 12px Georgia,serif;margin:0 0 17px;color:#858b7e}.growth-content label{display:block;font-size:10px;margin-bottom:16px}.growth-content output{float:right;color:#7a846e}.growth-content input[type=range]{display:block;width:100%;margin:12px 0 0;height:4px}.seed-row{display:flex;align-items:center;gap:10px}.seed-row label{flex:1;margin:0}.seed-row input{width:100%;height:28px;margin-top:7px;background:transparent;border:1px solid #d8dbd0;border-radius:4px;color:var(--ink);padding:4px 7px;font:11px monospace}.seed-row button{border:1px solid #d8dbd0;background:transparent;border-radius:4px;width:30px;height:28px;margin-top:19px;font-size:18px}.growth-content small{display:block;margin-top:13px;font-size:9px;color:#8b9185;line-height:1.6}@media(max-width:700px){.growth-panel{top:155px;right:5%;width:200px}.growth-panel[open]{max-height:calc(100% - 250px);overflow:auto}.growth-content canvas{height:120px}.growth-content label{margin-bottom:12px}}

footer a{color:inherit;text-decoration:none}footer a:hover{text-decoration:underline}

.range-ends{display:flex;justify-content:space-between;margin-top:8px;font-size:8px;color:#8b9185}

/* Keep the drawing surface on paper while the site shell follows its theme. */
body.komorebi-app { display:flex; flex-direction:column; min-height:100dvh; }
.komorebi-app > header, .komorebi-app > footer { flex-shrink:0; background:var(--panel); margin:0; padding:0 4%; color:var(--ink); border-color:var(--line); }
.komorebi-app > main { flex:1; height:auto; min-height:620px; background:var(--paper); --ink:#303d36; color:var(--ink); }
.komorebi-app .intro { max-width:calc(100% - 290px); }
.komorebi-app .growth-panel { color-scheme:light; }
.komorebi-app .tools { color-scheme:light; max-width:96%; }
.komorebi-app .growth-content input[type=number] { min-height:32px; }
.komorebi-app .top-note { color:var(--sub); }
@media(min-height:850px) { .komorebi-app > main { min-height:calc(100dvh - 230px); } }
@media(max-width:700px) {
 .komorebi-app .intro { max-width:85%; }
 .komorebi-app > main { min-height:660px; }
 .komorebi-app .tools { flex-wrap:wrap; justify-content:center; width:94%; white-space:normal; }
 .komorebi-app .canvas-label { bottom:160px; }
 .komorebi-app .growth-panel[open] { max-height:330px; }
}
.komorebi-app #forest { position:absolute; inset:0; width:100%; height:100%; }
.komorebi-app #toast:has(a) { pointer-events:auto; }
.komorebi-app #toast a { color:#fff; text-decoration:underline; margin-left:6px; }