@import url('notebook.css');
:root{--pet:#b9d886;--pet-light:#e1edb7;--pet-dark:#739854;--ink:#263c30;--room:#e5ecd3;--moss:#839c69}
body{background:radial-gradient(ellipse at 15% 20%,#19352e,transparent 50%),#0c1719;color:#e8eddf}.shell{width:min(1120px,calc(100% - 36px));padding-bottom:28px}.nav{margin-bottom:44px}.intro{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:32px}h1{font-size:clamp(2.8rem,7vw,5.5rem);margin:8px 0 0;letter-spacing:-.065em}.kicker{font:12px ui-monospace,monospace;letter-spacing:.17em;text-transform:uppercase;color:#c4d6a5}.intro p{max-width:32ch;font-size:1rem;margin:0 0 7px;color:#aebeb2}.game{display:grid;grid-template-columns:1.45fr 1fr;gap:24px;align-items:start}.device{background:#bfd0b0;padding:18px;border-radius:26px;box-shadow:0 14px 0 #405b4b,0 25px 70px #0004;border:1px solid #d8e5c5;color:var(--ink)}.device-top{display:flex;justify-content:space-between;align-items:center;padding:0 5px 13px;font:11px ui-monospace,monospace;text-transform:uppercase;letter-spacing:.13em}.led{display:inline-block;width:6px;height:6px;background:#507a3b;border-radius:50%;margin-right:7px}.room{position:relative;height:350px;background:var(--room);border:6px solid #536b56;border-radius:14px;overflow:hidden;isolation:isolate;transition:background 1s}.room::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 3px,#273c2710 3px 4px);pointer-events:none;z-index:5}.room[data-sleeping=true]{--room:#283e48;--moss:#526c64}.room[data-sleeping=true] .cloud{opacity:.12}.room[data-sleeping=true] .sun{background:#f3e8b5;box-shadow:0 0 20px #f3e8b540}.sun{position:absolute;width:44px;height:44px;right:37px;top:37px;background:#d8b867;box-shadow:0 0 0 7px #d8b86722}.cloud{position:absolute;width:76px;height:13px;top:73px;left:28px;background:#f6f6e5;box-shadow:16px -10px #f6f6e5,37px 5px #f6f6e5;animation:drift 9s ease-in-out infinite alternate}.backhill{position:absolute;width:300px;height:160px;border-radius:50%;bottom:-40px;left:-60px;background:#a8bb90}.backhill.right{left:auto;right:-90px;bottom:-35px;background:#96b082;width:330px}.floor{position:absolute;bottom:0;height:74px;width:100%;background:var(--moss);border-top:8px solid #77905c}.tuft{position:absolute;bottom:56px;left:30px;width:5px;height:22px;background:#536f43;box-shadow:8px 6px #536f43,16px -4px #536f43}.tuft.right{left:auto;right:40px;transform:scale(.7)}.flower{position:absolute;left:57px;bottom:73px;background:#f3d8a0;width:10px;height:10px;box-shadow:0 -8px #eec3a3,8px 0 #eec3a3,-8px 0 #eec3a3,0 8px #eec3a3}.room[data-growth=friend] .flower{box-shadow:0 -8px #eec3a3,8px 0 #eec3a3,-8px 0 #eec3a3,0 8px #eec3a3,350px 9px #eec3a3}.room[data-growth=kindred] .flower{box-shadow:0 -8px #eec3a3,8px 0 #eec3a3,-8px 0 #eec3a3,0 8px #eec3a3,285px 8px #eec3a3,330px -3px #f4df9d}.pet-button{position:absolute;left:50%;bottom:55px;transform:translateX(-50%);width:160px;height:170px;padding:0;border:0;background:none;cursor:pointer;color:var(--ink);z-index:2}.pet-button:hover{filter:brightness(1.03)}.pet-button:focus-visible{outline:3px dashed #314b38;outline-offset:8px}.pet-sprite{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 7px 0 #314b3820);animation:breathe 3s ease-in-out infinite}.pet-body{fill:var(--pet)}.pet-highlight{fill:var(--pet-light)}.pet-shade{fill:var(--pet-dark)}.eyes{animation:blink 5s infinite;transform-origin:80px 92px}.room[data-sleeping=true] .pet-sprite{animation-duration:5s}.room[data-sleeping=true] .eyes{animation:none}.room[data-mood=delighted] .pet-sprite{animation:hop 1.8s ease-in-out infinite}.room[data-action=play] .pet-sprite{animation:hop .45s ease-in-out 4}.room[data-action=feed] .pet-sprite{animation:nibble .3s ease-in-out 5}.spark{position:absolute;left:calc(50% + 64px);bottom:155px;z-index:3;font:28px monospace;color:#86603c;opacity:0;pointer-events:none}.room[data-action=pet] .spark,.room[data-action=clean] .spark,.room[data-action=feed] .spark{animation:spark 1.7s ease-out}.ball{position:absolute;width:25px;height:25px;bottom:76px;right:20%;background:#d39a7c;border:5px solid #9b675a;opacity:.8}.room[data-action=play] .ball{animation:ball .65s ease-in-out 3}.crumbs{position:absolute;bottom:61px;right:35%;width:5px;height:5px;background:#6d6041;box-shadow:13px 5px #6d6041,24px -1px #6d6041;display:none}.room[data-messy=true] .crumbs{display:block}.zz{display:none;position:absolute;top:90px;left:58%;font:22px monospace;color:#e8edcd}.room[data-sleeping=true] .zz{display:block;animation:breathe 3s infinite}.room-label{position:absolute;left:14px;top:12px;color:#39523e;font:10px ui-monospace,monospace;text-transform:uppercase;letter-spacing:.1em}.room[data-sleeping=true] .room-label{color:#d4dfce}.message{min-height:76px;padding:16px 6px 0;font-size:.92rem;line-height:1.5;color:#304738}.controls{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}.care{padding:12px 2px;border:1px solid #799075;border-bottom:4px solid #728768;border-radius:10px;background:#e0e8d1;color:#2b4536;font:600 12px system-ui;cursor:pointer;min-height:70px}.care span{display:block;font-size:23px;line-height:1.1;margin-bottom:8px;font-family:monospace}.care:hover:not(:disabled){background:#f3f5df}.care:active:not(:disabled){transform:translateY(2px);border-bottom-width:2px}.care:disabled{opacity:.48;cursor:not-allowed}.panel{background:#142422;border:1px solid #31463c;border-radius:22px;padding:27px}.pet-heading{display:flex;align-items:start;justify-content:space-between;gap:12px}.panel h2{font-size:2.1rem;margin:3px 0 0;overflow-wrap:anywhere}.badge{font:11px ui-monospace,monospace;color:#dce9bb;background:#263d32;padding:5px 9px;border-radius:5px}.subtitle{margin:5px 0 28px;color:#adbdab;font-size:.88rem}.stat{margin-top:20px}.stat-label{display:flex;justify-content:space-between;align-items:center;font-size:.86rem}.stat-label output{font:12px monospace;color:#bdc9b6}.stat meter{display:block;width:100%;height:9px;margin-top:9px;border:0;border-radius:6px;background:#293a32;appearance:none}.stat meter::-webkit-meter-bar{background:#293a32;border:0;height:9px}.stat meter::-webkit-meter-optimum-value{background:#b4d393}.stat meter::-webkit-meter-suboptimum-value{background:#dbc28c}.stat meter::-webkit-meter-even-less-good-value{background:#dba48c}.stat meter::-moz-meter-bar{background:#b4d393}.hint{min-height:42px;font-size:.85rem;margin:25px 0;color:#bacaaf}.bond{border-top:1px solid #34483b;padding-top:20px}.bond-head{display:flex;justify-content:space-between;font-size:.82rem}.bond p{font-size:.8rem;color:#9faf9f;margin:8px 0 0}.bond progress{width:100%;height:5px;appearance:none;border:0;margin-top:10px}.bond progress::-webkit-progress-bar{background:#293a32}.bond progress::-webkit-progress-value{background:#dfbb91}.bond progress::-moz-progress-bar{background:#dfbb91}.settings{margin-top:20px;border-top:1px solid #34483b;padding-top:15px;font-size:.85rem}.settings summary{cursor:pointer;color:#bacaaf}.settings label{display:block;margin:14px 0 6px}.name-row{display:flex;gap:8px}.name-row input{min-width:0;width:100%;background:#0c1b18;color:#e8eddf;border:1px solid #50644e;border-radius:6px;padding:9px;font:inherit}.small-button{background:#294437;color:#e6edd8;border:1px solid #617951;border-radius:6px;padding:8px 12px;cursor:pointer}.palettes{display:flex;gap:9px;margin:14px 0}.palette{font:12px system-ui;padding:8px 11px;border:2px solid transparent;border-radius:7px;color:#203128;cursor:pointer}.palette[aria-pressed=true]{border-color:#fff;outline:2px solid #718060;outline-offset:2px}.fern{background:#b9d886}.peach{background:#efbd9d}.sky{background:#a9cddc}.save-note{font-size:.78rem;color:#a8bba4;margin:16px 0 0}.field-note{display:grid;grid-template-columns:1fr 1fr;gap:35px;padding:46px 0 25px}.field-note h2{font-size:1.15rem;margin:0 0 12px}.field-note p{font-size:.88rem;max-width:56ch;color:#a7b7aa;margin:0}.field-note ul{margin:0;padding-left:18px;font-size:.88rem}.field-note li{color:#a7b7aa;margin-bottom:6px}@keyframes breathe{50%{transform:translateY(-3px)}}@keyframes blink{0%,43%,47%,100%{transform:scaleY(1)}45%{transform:scaleY(.1)}}@keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}@keyframes nibble{50%{transform:rotate(3deg)}}@keyframes drift{to{transform:translateX(32px)}}@keyframes spark{0%{opacity:0;transform:translateY(8px)}30%{opacity:1}100%{opacity:0;transform:translateY(-35px)}}@keyframes ball{50%{transform:translate(-65px,-90px) rotate(180deg)}}@media(max-width:820px){.game{grid-template-columns:1fr}.intro p{max-width:28ch}.panel{margin-top:10px}.field-note{gap:24px}}@media(max-width:520px){.intro{display:block}.intro p{margin-top:20px;max-width:38ch}.shell{width:calc(100% - 28px)}.nav{font-size:.8rem;gap:12px;margin-bottom:32px}.room{height:300px}.device{padding:12px}.panel{padding:23px}.field-note{grid-template-columns:1fr}.care{font-size:11px}.pet-button{width:140px;height:150px}}