/* A quiet washi and ink palette; the house remains the main view. */
:root{--washi:#f5f1e8;--ink:#353931;--accent:#77513d;--hairline:#d7d0c2}
body{color:var(--ink)}button,select,input{font:inherit}button:focus-visible,[role=button]:focus-visible,select:focus-visible{outline:2px solid #68776a;outline-offset:3px}
#top{inset:0 auto auto 0;padding:16px max(18px,env(safe-area-inset-left));pointer-events:none}#brand{font-size:9px;letter-spacing:.22em;color:var(--ink)}#brand b{font-size:18px;font-weight:500;letter-spacing:.16em}#brand small{display:none}
#quietMenu{position:fixed;right:max(16px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));z-index:45;border:1px solid var(--hairline);border-radius:4px;background:rgba(245,241,232,.95);color:var(--ink);padding:10px 16px;font-size:13px;letter-spacing:.12em;min-height:44px;cursor:pointer}
#quietDock{position:fixed;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:35;display:flex;gap:6px;align-items:center;max-width:calc(100% - 32px)}
#quietDock button{width:auto;min-height:44px;white-space:nowrap;border:1px solid var(--hairline);border-radius:4px;background:rgba(245,241,232,.95);color:var(--ink);padding:9px 16px;font-size:12px;font-weight:500;letter-spacing:.05em;cursor:pointer}
#quietDock #walkBtn{background:#39463c;color:#faf7f0;border-color:#39463c}#quietDock #doorToggle{max-width:250px;overflow:hidden;text-overflow:ellipsis}#quietDock #doorToggle[hidden]{display:none!important}#quietDock #doorStatus{position:absolute;bottom:54px;left:0;right:0;text-align:center;background:var(--washi);font-size:12px}#quietDock #doorStatus:empty{display:none}
#ui,#turn,#walkHint,#hint,#jdots{display:none!important}#stick{width:82px;height:82px;left:max(14px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));opacity:.55}#stick .knob{width:30px;height:30px;margin:-15px}
#quietDrawer{position:fixed;inset:12px 12px 12px auto;margin:0;width:min(350px,calc(100vw - 24px));max-width:350px;height:calc(100dvh - 24px);max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--hairline);border-radius:6px;background:var(--washi);color:var(--ink);box-shadow:0 10px 45px #1f282522;overflow:hidden}
#quietDrawer::backdrop{background:#20282125}#quietDrawer:not([open]){display:none}.quietHeading{display:flex;justify-content:space-between;align-items:center;padding:20px 20px 16px;border-bottom:1px solid var(--hairline)}.quietHeading small{font-size:9px;letter-spacing:.2em;color:#817866}.quietHeading h2{font-family:'Yu Mincho','Hiragino Mincho ProN',serif;font-size:23px;font-weight:500;letter-spacing:.12em;margin:5px 0 0}#quietClose{border:0;background:none;font-size:12px;color:#5b6056;padding:10px;cursor:pointer}
#quietContents{height:calc(100% - 90px);overflow-y:auto;overscroll-behavior:contain;padding:0 20px 24px}#quietContents section{padding:18px 0;border-bottom:1px solid var(--hairline)}#quietContents h3{font-size:11px;font-weight:500;letter-spacing:.17em;color:#807967;margin:0 0 12px}
#quietDrawer .tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}#quietDrawer .tab{padding:10px 4px;min-height:44px;border:1px solid var(--hairline);border-radius:3px;background:transparent;color:var(--ink);width:auto;flex:initial}#quietDrawer .tab i{display:none}#quietDrawer .tab b{font-size:12px;font-weight:500}#quietDrawer .tab.on{background:#e3e7df;border-color:#86907d;color:#304234}
#quietDrawer #topR{position:static;display:flex;align-items:stretch;gap:10px;width:auto;max-width:none}#quietDrawer #topR>div{flex-wrap:wrap}#quietDrawer #topR>div:empty{display:none}#quietDrawer #seasons,#quietDrawer #hare{padding:2px;border-radius:4px;border:1px solid var(--hairline);background:none}#quietDrawer .sbtn{padding:9px;min-width:35px;min-height:40px;font-size:12px;border-radius:3px}#quietDrawer .sbtn.on{background:#65745d;color:white}#quietDrawer #note{font-size:11px;line-height:1.7;border:0;padding:0;background:none;max-width:none}#quietDrawer #sunbox{padding:7px 0;background:none;width:100%}#quietDrawer #hour{min-width:0;width:130px;accent-color:#65745d}
#quietDrawer #planBtn{margin-top:8px;text-align:center;border:1px solid var(--hairline);border-radius:3px;padding:10px;min-height:44px;background:transparent;font-size:12px}#quietDrawer #windBtn{background:transparent;border:1px solid var(--hairline);border-radius:3px;font-size:12px}#quietDrawer #windBtn.on{background:#e3e7df;color:#304234}
#quietDrawer #cap{margin-top:14px;padding:0;border:0;border-radius:0;background:none;backdrop-filter:none}#quietDrawer #cap h2{font-size:13px;font-weight:500}#quietDrawer #cap h2:after{display:none}#quietDrawer #cap p{display:block;font-size:12px;line-height:1.9;margin-top:7px;color:#686b5e}#quietDrawer #peel{position:static;transform:none;display:none;max-width:none;width:auto;max-height:none;margin-top:15px;padding:0;background:none;box-shadow:none;border:0}#quietDrawer #peel.open{display:flex}#quietDrawer #peelSteps{display:flex;flex-wrap:wrap;gap:5px}#quietDrawer .pstep{font-size:11px;padding:8px;min-height:40px}#quietDrawer #dekiru{margin-top:12px}#quietDrawer #dkBar{overflow-x:auto}#quietDrawer #quietSettings{display:flex;flex-direction:column;gap:12px}#quietSettings label{font-size:12px;display:flex;align-items:center;gap:10px}#quietSettings select{padding:8px;border:1px solid var(--hairline);background:#fffdf7;border-radius:3px}#quietSettings input{accent-color:#65745d}.quietTip{font-size:11px;line-height:1.9;color:#777969}#exitPreview{padding:10px;border:1px solid var(--hairline);background:transparent;border-radius:3px;color:var(--ink);font-size:12px;cursor:pointer}
@media(max-height:540px){#top{padding:10px max(14px,env(safe-area-inset-left))}#brand b{font-size:16px}#quietMenu{top:10px;min-height:40px;padding:7px 12px}#quietDock{bottom:max(8px,env(safe-area-inset-bottom))}#quietDock button{min-height:40px;padding:7px 13px}#quietDrawer{inset:8px 8px 8px auto;height:calc(100dvh - 16px);max-height:calc(100dvh - 16px)}.quietHeading{padding:12px 16px}.quietHeading h2{font-size:20px}#quietContents{height:calc(100% - 72px);padding:0 16px 18px}#quietContents section{padding:12px 0}}
@media(max-width:500px){#quietDock{gap:4px;width:calc(100% - 24px);justify-content:center}#quietDock button{padding:9px 10px;font-size:11px}#quietDock #doorToggle{max-width:160px}body.walk #quietDock{left:auto;right:12px;transform:none;width:auto;max-width:calc(100% - 110px);flex-wrap:wrap;justify-content:flex-end}body.walk #quietDock #doorToggle{order:-1;flex-basis:100%;max-width:230px}}
