.device-wrap{display:grid;gap:14px;justify-items:center}.device{--hi: #fff;--ring: #d6d2c8;--drop: .45;--hole: #a8a49c;margin:0;width:min(100%,640px);padding:2.6% 2.6% 0;border-radius:4.2%/4.4%;background:linear-gradient(180deg,#fff,#f5f5f3)}@media(prefers-color-scheme:dark){.device{--hi: rgba(255,255,255,.06);--ring: #45423d;--drop: .8;--hole: #1c1b19;background:linear-gradient(180deg,#3a3834,#2c2a27)}}.panel{--paper: #dddbd5;position:relative;aspect-ratio:4 / 3;background:var(--paper);border-radius:8px;overflow:hidden;box-shadow:inset 0 0 0 1px #00000014,inset 0 1px 3px #0000001f}.panel img,.panel canvas{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:multiply}.panel canvas[hidden]{display:none}.panel:has(canvas:not([hidden])) img{visibility:hidden}.panel:is([data-state=waiting],[data-state=listening]) :is(img,canvas){visibility:hidden}.panel[data-state=intro] img{visibility:hidden;animation:reveal 0s 3s forwards}@keyframes reveal{to{visibility:visible}}.panel .msg{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:0 10%;z-index:2}.panel:is([data-state=waiting],[data-state=listening],[data-state=date]) .msg{display:flex}.panel[data-state=date] :is(img,canvas){visibility:hidden}.panel[data-state=date] .words{font:clamp(20px,3.6vw,30px)/1.35 "IBM Plex Mono",ui-monospace,monospace;white-space:pre-line}.panel .note{display:none;margin:0;font:clamp(11px,1.6vw,13px)/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.08em;color:#6b675f}.panel[data-state=date] .note:not(:empty){display:block}.panel .words{margin:0;min-height:1.3em;text-align:center;font:clamp(18px,3.4vw,28px)/1.3 "Zen Kurenaido","Shippori Mincho",serif;color:#2b2a27}.enso,.breath{display:none}.panel[data-state=waiting] .enso{display:block;width:clamp(36px,7vw,56px);fill:none;stroke:#2b2a27;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:104;stroke-dashoffset:104;animation:enso 3.2s cubic-bezier(.5,0,.3,1) infinite}@keyframes enso{0%{stroke-dashoffset:104;opacity:.85}55%{stroke-dashoffset:0;opacity:.85}80%,to{stroke-dashoffset:0;opacity:0}}.panel[data-state=listening] .breath{display:block;width:14px;height:14px;border-radius:50%;background:#2b2a27;animation:breath 1.6s ease-in-out infinite}@keyframes breath{0%,to{transform:scale(.7);opacity:.45}50%{transform:scale(1.15);opacity:.9}}@media(prefers-reduced-motion:reduce){.enso,.breath{animation:none!important;stroke-dashoffset:0!important}}.panel.flash:after{content:"";position:absolute;inset:0;z-index:3;background:var(--paper);opacity:0;animation:clear .42s ease-in-out}@keyframes clear{50%{opacity:1}}.chin{position:relative;aspect-ratio:605 / 160}.grille{position:absolute;left:2.4%;top:63%;transform:translateY(-50%);display:grid;grid-template-columns:repeat(8,1fr);gap:1.9em 2.5em;font-size:clamp(2.5px,.8vw,5px)}.grille i{width:1em;height:1em;border-radius:50%;background:var(--hole);box-shadow:inset 0 .2em .25em #00000059}.device:is([data-led=on],[data-led=breathe],:has(.panel:is([data-state=listening],[data-state=waiting]))) .led{background:#2cf06a;box-shadow:0 0 .5em .2em #2cf06ad9,0 0 1.6em .5em #2cf06a66}.device:is([data-led=breathe],:has(.panel[data-state=waiting])) .led{animation:led 1.6s ease-in-out infinite}@keyframes led{50%{opacity:.45}}@media(prefers-reduced-motion:reduce){.led{animation:none!important}}.mic{position:absolute;left:83.4%;top:62%;width:clamp(3px,.6vw,4px);aspect-ratio:1;border-radius:50%;background:var(--hole);transform:translate(-50%,-50%)}.device .side{appearance:none;-webkit-appearance:none;box-sizing:content-box;min-width:0;position:absolute;left:100%;top:69%;width:5px;height:9.5%;padding:0;border:0;margin:0;border-radius:0 3px 3px 0;cursor:pointer;background:#f7f7f5;box-shadow:0 0 0 1px var(--ring);transition:width .08s ease,background .15s}.device .side.down{top:80.78%}.device .side:before{content:"";position:absolute;inset:-4px -10px -4px -8px}.device .side:active{width:2.5px}.device .side:hover{background:#e9e8e4}@media(prefers-color-scheme:dark){.device .side:hover{background:#2e2c29}}@media(prefers-color-scheme:dark){.device .side{background:#3a3834}}.tools{display:flex;gap:2px}.tool{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:#9d978a;cursor:pointer;transition:color .15s,background .15s}.tool:hover:not(:disabled){color:#3a3833;background:#0000000d}.tool:disabled{opacity:.35;cursor:default}.tool svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.device-wrap{perspective:1400px}.device{--lift: 0;transform:translateY(calc(var(--lift) * -6px)) scale(calc(1 + var(--lift) * .012)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));transform-style:preserve-3d;position:relative;will-change:transform;box-shadow:0 1px 0 var(--hi) inset,0 0 0 1px var(--ring),0 calc(22px + var(--lift) * 14px) calc(50px + var(--lift) * 20px) -24px rgba(0,0,0,calc(var(--drop) + var(--lift) * .1)),0 4px 10px -6px #00000040}.device:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--gx, 50%) var(--gy, 0%),rgba(255,255,255,var(--glare, 0)),transparent 60%)}.knob{position:absolute;left:94.4%;top:62%;transform:translate(-50%,-50%);width:9.6%;min-width:32px;aspect-ratio:1;padding:0;border-radius:50%;border:0;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;background:linear-gradient(180deg,#fbfbfa,#f1f1ef);box-shadow:0 0 0 1.5px #dcdad5,0 0 0 3px #fafaf8,0 0 0 4px #e0ded9,inset 0 1px #fff;transition:box-shadow .08s ease,background .08s ease}.knob.down{background:linear-gradient(180deg,#eeeeec,#f4f4f2);box-shadow:0 0 0 1.5px #d6d4ce,0 0 0 3px #fafaf8,0 0 0 4px #e0ded9,inset 0 2px 4px #00000026}@media(prefers-color-scheme:dark){.knob{background:linear-gradient(180deg,#3d3b37,#34322e);box-shadow:0 0 0 1.5px #4b4843,0 0 0 3px #302e2b,0 0 0 4px #45423d,inset 0 1px #ffffff0f}.knob.down{background:#302e2a;box-shadow:0 0 0 1.5px #4b4843,0 0 0 3px #302e2b,0 0 0 4px #45423d,inset 0 2px 4px #0006}}.knob:hover:not(:disabled):not(.down){background:linear-gradient(180deg,#f1f1ef,#e8e7e3)}@media(prefers-color-scheme:dark){.knob:hover:not(:disabled):not(.down){background:linear-gradient(180deg,#363431,#2e2c29)}}.knob:disabled{cursor:progress}.sub .model{font:.8em IBM Plex Mono,ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase}.subtitle{margin:28px 0 0;max-width:min(100%,640px);text-align:center;font:13px/1.5 IBM Plex Mono,ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);min-height:1.5em;padding-left:.14em}.row{width:min(100%,640px);min-height:44px;margin-top:4px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px}.subtitle+.row{margin-top:16px}.row form{flex:1 1 100%;display:flex;align-items:center;gap:14px;min-width:0;height:44px}.row form[hidden]{display:none}.row input{flex:1;min-width:0;height:40px;padding:0 2px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;font:21px/1.2 Shippori Mincho,serif;color:var(--ink);transition:border-color .2s}.row input::placeholder{color:var(--muted);opacity:.6}.row input:focus-visible{outline:none;border-bottom-color:var(--ink)}.device-wrap .act{border:0;border-radius:10px;background:none;padding:10px 8px;cursor:pointer;color:var(--muted);font:15px/1 IBM Plex Mono,ui-monospace,monospace}.device-wrap .act:hover{color:var(--ink)}.device-wrap .actions{display:grid;grid-template-columns:repeat(2,168px);justify-content:center;gap:12px}.device-wrap .btn{height:46px;padding:0 20px;border:1px solid #e3e1dc;border-radius:13px;background:#fbfbf9;color:var(--ink);cursor:pointer;font:14px/1 IBM Plex Mono,ui-monospace,monospace;letter-spacing:.02em;transition:border-color .15s,opacity .15s,transform .08s}.device-wrap .btn:hover:not(:disabled){border-color:var(--muted)}.device-wrap .btn.solid{background:#dddbd5;border-color:#d3d1ca}.device-wrap .btn.solid:hover:not(:disabled){background:#d4d2cb}@media(prefers-color-scheme:dark){.device-wrap .btn{background:#34322e;border-color:#45423d}.device-wrap .btn.solid{background:#4a4843;border-color:#55524c}.device-wrap .btn.solid:hover:not(:disabled){background:#52504a}}.device-wrap .btn:active:not(:disabled){transform:translateY(1px)}.device-wrap .btn:disabled{opacity:.4;cursor:default}.device-wrap .keep,.device-wrap .keep .tools{gap:6px}.device-wrap .keep .tool,.device-wrap #device-heart{width:auto;min-width:48px;height:48px;min-height:48px;padding:0 10px;border:0;border-radius:12px;background:none;color:var(--muted);display:inline-grid;place-items:center;transition:color .15s,background .15s}.device-wrap .keep .tool svg{width:24px;height:24px;stroke-width:1.5}.device-wrap #device-heart{font:21px/48px IBM Plex Mono,ui-monospace,monospace;width:48px;min-width:48px;padding:0 0 0 13px;display:block;text-align:left;white-space:nowrap;overflow:visible}.device-wrap .keep .tool:hover:not(:disabled),.device-wrap #device-heart:hover:not(:disabled){color:var(--ink);background:#0000000a}.device-wrap #device-heart[aria-pressed=true]{background:none;color:var(--seal)}.device-wrap .row input{height:46px;font-size:24px}.device-wrap .ask .go{flex:none;width:110px}.row .heart:disabled{opacity:.45;cursor:default}.record{display:grid;gap:32px}#daily,#visitors .days{display:grid;gap:56px}#daily[hidden],#visitors[hidden]{display:none}.record-tabs{display:flex;gap:22px;border-bottom:1px solid var(--wash)}.record-tabs [role=tab]{background:none;border:0;border-bottom:1px solid transparent;margin-bottom:-1px;padding:8px 0;cursor:pointer;color:var(--muted);font:13px/1 IBM Plex Mono,ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase}.record-tabs [role=tab][aria-selected=true]{color:var(--ink);border-color:var(--seal)}.record-tabs [role=tab]:focus-visible{outline:2px solid var(--seal);outline-offset:4px}#visitors .days:not([data-loaded]) .grid:before{content:"";aspect-ratio:4 / 3;margin-bottom:38px;border-radius:4px;background:var(--wash)}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}