:root{--ink:#f6f5ed;--muted:#898980;--accent:#d4e99a;--pad:38px}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;background:#000}body{overflow:hidden;color:var(--ink);font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;overscroll-behavior:none}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;border:0;background:transparent;padding:0}button:focus-visible,a:focus-visible,input:focus-visible+img{outline:2px solid var(--accent);outline-offset:6px}::selection{background:var(--accent);color:#111}.site-header{position:absolute;z-index:3;inset:25px var(--pad) auto;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.site-header>*{pointer-events:auto}.monogram{font:bold italic 39px/1 Georgia,serif;transform:rotate(-9deg);width:44px}.monogram span{color:var(--accent)}.about-open{display:flex;align-items:center;gap:15px;font-size:12px;padding:12px 0}.about-open span{font-size:21px;transition:transform .2s}.about-open:hover span{transform:translate(3px,-3px)}.playground{position:absolute;inset:0;isolation:isolate}#stage{display:block;width:100%;height:100%;pointer-events:none}.character-hit{position:absolute;left:50%;top:55%;width:280px;height:340px;transform:translate(-50%,-50%);cursor:grab;touch-action:none;border-radius:46%;z-index:2;outline-offset:12px}.character-hit:active{cursor:grabbing}.character-hit:focus-visible{outline:2px dashed var(--accent)}.reaction{position:absolute;pointer-events:none;font:italic bold 27px/1.2 Georgia,serif;transform:rotate(-12deg);color:var(--accent);opacity:0;transition:opacity .18s}.reaction.show{opacity:1}.site-footer{position:absolute;z-index:3;inset:auto var(--pad) 25px;display:flex;justify-content:space-between;align-items:center;gap:20px;pointer-events:none}.site-footer>*{pointer-events:auto}.world-nav{display:flex;gap:34px}.world-nav button{display:flex;gap:9px;align-items:baseline;padding:12px 0;font-size:12px;transition:color .2s}.world-nav button:hover{color:var(--accent)}.world-nav small{font:9px monospace;color:var(--muted)}.reset{font:32px/1 Georgia;width:44px;height:44px;display:grid;place-items:center;transition:transform .35s}.reset:hover{transform:rotate(-35deg);color:var(--accent)}
dialog{position:fixed;inset:0 0 0 auto;margin:0;width:min(590px,100%);height:100dvh;max-height:100dvh;padding:28px 42px 40px;border:0;border-left:1px solid #282823;background:#000;color:var(--ink);overflow:auto}dialog[open]{animation:panel-in .45s cubic-bezier(.16,1,.3,1)}dialog::backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(6px)}[hidden]{display:none!important}.panel-top{display:flex;align-items:center;justify-content:space-between;font:9px/1.4 monospace;color:var(--muted)}.close{width:44px;height:44px;font:32px/1 Arial;color:var(--ink);transition:transform .25s}.close:hover{transform:rotate(90deg)}.panel-tabs{display:flex;gap:27px;margin:18px 0 5px;border-bottom:1px solid #282823}.panel-tabs button{font-size:12px;padding:14px 0;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}.panel-tabs button[aria-selected=true]{color:var(--accent);border-color:var(--accent)}.panel-page{animation:page-in .3s ease-out}.panel-avatar{display:block;width:200px;height:235px;object-fit:contain;margin:13px auto 22px;user-select:none;pointer-events:none}.panel-avatar.peace{width:250px;height:230px;object-position:center 46%}.panel-avatar.idea{width:215px;height:240px}.panel-avatar.sleepy{height:245px;width:200px}.eyebrow{font:9px/1.5 monospace;color:var(--accent);margin:8px 0 14px}h2{font-size:32px;font-weight:400;line-height:1.5;margin:0}h2 em{font:bold italic 37px/1.3 Georgia,"Songti SC",serif;font-style:italic}h2 .accent{color:var(--accent)}.panel-copy{font-size:13px;line-height:2;color:#a7a79d;margin:24px 0 40px}.panel-end{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:20px;border-top:1px solid #282823;font:9px monospace;color:var(--muted)}.panel-end button{font-size:12px;color:var(--ink)}.panel-end button span{font-size:20px;margin-left:8px}.note-head{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin:30px 0 12px;color:var(--muted)}#note-status{color:var(--accent);font-size:10px}textarea{display:block;width:100%;min-height:125px;resize:vertical;background:#10110e;color:var(--ink);border:1px solid #303128;padding:17px;font:13px/1.9 Arial,"PingFang SC",sans-serif;border-radius:4px;outline:none}textarea:focus{border-color:#9aab71}textarea::placeholder{color:#66685d}.note-footer{display:flex;align-items:center;justify-content:space-between;margin-top:10px;font:9px monospace;color:var(--muted)}.save-note{width:37px;height:37px;border:1px solid #464d37;border-radius:50%;font-size:20px;color:var(--accent);transition:background .2s}.save-note:hover{background:#20261a}.mood-picker{display:flex;justify-content:space-between;gap:18px;margin:26px 0 0;padding:18px 0 0;border:0;border-top:1px solid #282823}.mood-picker legend{font-size:11px;color:var(--muted);padding:0 12px 0 0}.mood-picker label{position:relative;display:flex;flex-direction:column;align-items:center;cursor:pointer;gap:5px;color:var(--muted);font-size:10px;flex:1}.mood-picker img{width:76px;height:86px;object-fit:contain;transition:transform .2s;border:1px solid transparent}.mood-picker input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.mood-picker input:checked+img{border-bottom-color:var(--accent)}.mood-picker input:checked~span{color:var(--accent)}.mood-picker label:hover img{transform:translateY(-4px)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes panel-in{from{opacity:0;transform:translateX(32px)}to{opacity:1;transform:translateX(0)}}@keyframes page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){:root{--pad:22px}.site-header{top:20px}.monogram{font-size:34px}.about-open{font-size:11px}.site-footer{bottom:18px}.world-nav{gap:22px}.world-nav button{font-size:11px}.world-nav small{font-size:8px}.reset{width:30px}.reaction{font-size:23px}dialog{padding:22px 25px 35px;border:0}.panel-top{font-size:8px}.panel-avatar{height:220px;margin-bottom:18px}.panel-avatar.peace{width:235px;height:220px}.panel-avatar.idea{height:225px}.panel-avatar.sleepy{height:225px}.panel-copy{font-size:12px}h2{font-size:29px}h2 em{font-size:33px}.mood-picker{gap:10px}.panel-end{font-size:8px}.panel-end button{font-size:11px}}@media(max-height:700px){.panel-avatar,.panel-avatar.peace,.panel-avatar.idea,.panel-avatar.sleepy{height:180px;margin-top:0;margin-bottom:8px}.panel-copy{margin:16px 0 24px}.note-head{margin-top:18px}textarea{min-height:100px}.panel-tabs{margin-top:8px}.eyebrow{margin-top:5px}}
.companion{position:absolute;z-index:2;left:75%;top:75%;width:clamp(150px,23vw,230px);aspect-ratio:1.5;transform:translate(-50%,-50%);touch-action:manipulation;user-select:none;outline-offset:8px}
.dog-art{position:absolute;inset:0;display:block;transform-origin:50% 90%;animation:dog-breathe 4s ease-in-out infinite}
.dog-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.dog-body{clip-path:polygon(0 0,100% 0,100% 25%,78% 55%,78% 72%,100% 80%,100% 100%,0 100%)}
.dog-tail{clip-path:polygon(78% 55%,100% 25%,100% 80%,78% 72%);transform-origin:78% 65%}
.attentive .dog-tail,.happy .dog-tail{animation:tail-wag .32s ease-in-out infinite alternate}.happy .dog-tail{animation-duration:.14s}
.dog-reaction{position:absolute;top:-8px;left:20%;font:italic bold 22px Georgia,serif;color:var(--accent);opacity:0;transform:translateY(5px) rotate(-8deg);transition:opacity .2s,transform .2s;pointer-events:none}.happy .dog-reaction{opacity:1;transform:translateY(-8px) rotate(-8deg)}
@keyframes tail-wag{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}@keyframes dog-breathe{50%{transform:scaleY(1.018)}}
@media(max-height:650px){.companion{width:130px}}
body{--reveal:0px}
.playground{transform:translateX(calc(var(--reveal)*-.38));transition:transform .65s cubic-bezier(.22,1,.36,1)}
dialog{z-index:5;max-width:100vw;width:min(680px,78vw);transform:translateX(calc(100% - var(--reveal)));transition:transform .65s cubic-bezier(.22,1,.36,1);border-left:1px solid #454d36;padding-left:52px;padding-right:52px;box-shadow:-35px 0 80px #0008}
dialog[open]{animation:none}dialog::backdrop{background:transparent;backdrop-filter:none}
.pull-space{position:fixed;z-index:6;right:var(--reveal);top:50%;transform:translateY(-50%);width:88px;height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;touch-action:none;cursor:ew-resize;color:var(--accent);transition:right .65s cubic-bezier(.22,1,.36,1),color .2s}
.pull-arrow{font:54px/.8 Georgia,serif;display:block;transition:transform .25s;transform:rotate(-7deg)}
.pull-caption{font:8px/1.5 monospace;letter-spacing:0}.pull-space:hover .pull-arrow{transform:translateX(-8px) rotate(-7deg)}
.space-open .site-header,.space-open .site-footer{opacity:.15;pointer-events:none}.space-open .site-header>*,.space-open .site-footer>*{pointer-events:none}.site-header,.site-footer{transition:opacity .4s}
.pulling .playground,.pulling dialog,.pulling .pull-space{transition:none}.pulling{cursor:ew-resize;user-select:none}
@media(max-width:600px){dialog{width:100vw;padding-left:25px;padding-right:25px}.pull-space{width:52px;height:80px}.pull-arrow{font-size:38px}.pull-caption{font-size:7px}.space-open .pull-space{right:calc(var(--reveal) - 52px);top:50%;opacity:0;pointer-events:none}h2 em{font-size:31px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}