:root { color-scheme: dark; --cream: #eeecda; --muted: #96a49b; --yellow: #e4bd6a; --mint: #aec69d; --line: #34423c; }
* { box-sizing: border-box; }
body { margin: 0; background: #182524; color: var(--cream); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: wait; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--yellow); outline-offset: 5px; }
[hidden] { display: none !important; }
.topbar { max-width: 1280px; margin: auto; padding: 29px 48px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.brand { color: var(--cream); text-decoration: none; font-size: 18px; letter-spacing: 1px; font-weight: 650; display: flex; gap: 18px; align-items: center; }
.brand span { font-size: 8px; letter-spacing: 2px; font-weight: 400; color: var(--muted); }
.edition { color: var(--muted); font-size: 10px; letter-spacing: 2px; }
main { max-width: 1110px; margin: 54px auto 45px; padding: 0 26px; display: grid; grid-template-columns: 1fr 540px; gap: 62px; align-items: start; }
.intro { padding-top: 48px; }.eyebrow { font-size: 8px; letter-spacing: 2.5px; color: var(--muted); margin: 0; }
h1 { margin: 24px 0 27px; font-size: clamp(45px, 5.4vw, 70px); line-height: 1.25; letter-spacing: -3px; font-weight: 750; } h1 > span { color: var(--yellow); }
.description { color: #b1bbae; font-size: 15px; line-height: 2; }
.intro-rule { position: relative; border-left: 2px solid #a18b56; padding-left: 17px; margin: 34px 0; display: flex; flex-direction: column; gap: 9px; }
.intro-rule > span:first-child { color: #929d8e; font-size: 10px; }.intro-rule strong { font-size: 16px; font-weight: 500; }
.drawn-arrow { position: absolute; right: 3px; top: 11px; color: #bdad7d; font: 58px Georgia, serif; transform: rotate(-12deg); }
.smallprint { margin-top: 45px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.connection { margin-top: 42px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 10px; color: #b7bea9; }
.status-dot, .room-dot { width: 6px; height: 6px; border-radius: 50%; background: #bda467; display: inline-block; }.status-dot.ready { background: #9bc27c; }
.connection button { border: 0; background: none; color: #d3b66f; font-size: 10px; padding: 5px 0; margin-left: 5px; text-decoration: underline; text-underline-offset: 4px; }
.privacy { font-size: 9px; color: #839389; line-height: 1.9; }
.experiment { background: #21322e; border: 1px solid #405047; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 80px #050c0b35; }
.room-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 21px; font-size: 10px; color: #c1c8b6; }.room-header > span:first-child { display: flex; align-items: center; gap: 7px; }.room-header > span:nth-child(2) { color: #87998b; font-size: 9px; }.room-header button { border: 1px solid #4a5a4b; border-radius: 20px; padding: 5px 9px; color: #c5c9b5; background: none; font-size: 9px; }
.room { position: relative; width: 100%; aspect-ratio: 1.2; background: #31473f; overflow: hidden; isolation: isolate; }
.wall-grain { position: absolute; inset: 0; opacity: .09; background-image: radial-gradient(#e2e2c5 1px, transparent 1px); background-size: 7px 7px; pointer-events: none; }
.window { position: absolute; top: 9%; left: 10%; width: 25%; height: 32%; background: #1d3535; border: 8px solid #53675a; border-radius: 48% 48% 3px 3px; box-shadow: 0 0 0 2px #243b35, inset 0 0 30px #0d2424; }
.window::after { content: ''; position: absolute; top: 5%; bottom: 0; width: 4px; left: 49%; background: #53675a; }
.moon { position: absolute; width: 32px; height: 32px; border-radius: 50%; background: #e9dca5; top: 24%; left: 18%; box-shadow: 0 0 22px #e1d1a122; }.moon::after { content: ''; position: absolute; width: 30px; height: 30px; border-radius: 50%; background: #1d3535; top: -6px; left: 9px; }
.tiny-star { position: absolute; color: #abbd9f; }.star-one { top: 20%; right: 19%; font-size: 13px; }.star-two { top: 56%; left: 24%; font-size: 10px; }.star-three { bottom: 17%; right: 25%; }
.hanging-lamp { position: absolute; top: 0; left: 76%; width: 15%; height: 37%; z-index: 7; border: 0; background: none; padding: 0; }.lamp-wire { position: absolute; width: 2px; height: 45%; top: 0; left: 50%; background: #9d9d70; }.lamp-shade { position: absolute; top: 40%; left: 0; width: 100%; height: 26%; border-radius: 50% 50% 7% 7%; background: #d8b96c; border-bottom: 7px solid #f6d88b; }.lamp-glow { position: absolute; top: 62%; left: -75%; width: 250%; height: 135%; background: linear-gradient(#ead9a018, #ead9a000); clip-path: polygon(36% 0, 64% 0, 100% 100%, 0 100%); pointer-events: none; }.room.dark { background: #233732; }.room.dark .lamp-shade { background: #8b845c; border-bottom-color: #aaa17a; }.room.dark .lamp-glow { opacity: 0; }
.sleep-sign { position: absolute; top: 16%; left: 45%; border: 1px solid #75836a; color: #aaba9a; font-size: 10px; text-align: center; padding: 10px 15px; transform: rotate(-5deg); line-height: 1.8; }.sleep-sign small { font-size: 7px; opacity: .7; }
.bed-shadow { position: absolute; left: 15%; bottom: 12%; width: 69%; height: 9%; border-radius: 50%; background: #102a244d; z-index: 1; }
.bed { position: absolute; left: 16%; top: 56%; width: 61%; height: 29%; z-index: 3; }.pillow { position: absolute; top: 0; left: 2%; height: 30%; width: 40%; border-radius: 40%; background: #bec6a0; transform: rotate(-7deg); }.blanket { position: absolute; inset: 12% 0 17% 6%; background: #9daa7f; border-radius: 40% 23% 8% 8%; box-shadow: inset -12px -12px #82936a; overflow: hidden; }.blanket span { position: absolute; width: 18%; height: 100%; top: 0; background: #b0bc9066; transform: rotate(15deg); }.blanket span:nth-child(1) { left: 13%; }.blanket span:nth-child(2) { left: 43%; }.blanket span:nth-child(3) { left: 73%; }.bed-edge { position: absolute; bottom: 13%; width: 100%; height: 13%; background: #a9875d; border-radius: 5px; border-bottom: 5px solid #846a4b; }.bed-leg { position: absolute; width: 5%; height: 17%; bottom: 0; background: #9e7d55; }.left-leg { left: 5%; }.right-leg { right: 5%; }
.monster { position: absolute; top: 36%; left: 27%; width: 38%; height: 32%; z-index: 5; animation: breathe 3s ease-in-out infinite; transform-origin: center bottom; }.monster-body { position: absolute; inset: 11% 6% 0; border-radius: 46% 46% 42% 42%; background: #c8be9a; box-shadow: inset -10px -6px #b0a780; }.ear { position: absolute; width: 28%; height: 50%; top: -7%; background: #b8af8a; border-radius: 80% 20% 60% 20%; }.ear-left { left: 4%; transform: rotate(-29deg); }.ear-right { right: 4%; transform: rotate(29deg) scaleX(-1); }.ear::after { content: ''; position: absolute; width: 42%; height: 50%; top: 20%; left: 26%; background: #a5977b; border-radius: inherit; }.fluff { position: absolute; width: 26%; height: 15%; top: -5%; left: 39%; background: #c8be9a; transform: rotate(-12deg); border-radius: 100% 0; }
.eye { position: absolute; top: 43%; width: 16%; height: 9%; border-bottom: 3px solid #3f4d3c; border-radius: 50%; }.eye-left { left: 23%; transform: rotate(8deg); }.eye-right { right: 23%; transform: rotate(-8deg); }.cheek { position: absolute; top: 58%; width: 13%; height: 8%; background: #c78e7266; border-radius: 50%; }.cheek-left { left: 14%; }.cheek-right { right: 14%; }.mouth { position: absolute; width: 10%; height: 12%; border-radius: 50%; background: #6b7055; left: 46%; top: 63%; }.brow { position: absolute; width: 15%; height: 3px; background: #7b7d5e; top: 32%; opacity: 0; }.brow-left { left: 23%; }.brow-right { right: 23%; }
.paw { position: absolute; bottom: -2%; width: 23%; height: 21%; border-radius: 50%; background: #c8be9a; box-shadow: inset -3px -4px #b0a780; }.paw-left { left: 3%; }.paw-right { right: 3%; }.revenge-sign { display: none; }
.sleep-letters { position: absolute; top: 32%; left: 64%; z-index: 6; color: #c9c9a6; font-family: Georgia, serif; }.sleep-letters span { position: absolute; font-size: 16px; animation: float 3s infinite; }.sleep-letters span:nth-child(2) { left: 14px; top: -15px; font-size: 21px; animation-delay: .4s; }.sleep-letters span:nth-child(3) { left: 33px; top: -33px; font-size: 28px; animation-delay: .8s; }
.tail-target { position: absolute; left: 64%; top: 57%; width: 17%; height: 20%; z-index: 6; padding: 0; background: none; border: 0; }.tail-shape { display: block; position: absolute; inset: 0; border: 13px solid #b7ad87; border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(24deg); }.tail-target:hover .tail-shape { transform: rotate(35deg); }
.side-table { position: absolute; left: 81%; top: 71%; width: 15%; height: 15%; z-index: 3; }.side-table > div { width: 100%; height: 18%; background: #a5855f; border-radius: 3px; }.side-table > span { position: absolute; top: 16%; left: 14%; width: 72%; height: 84%; border-left: 5px solid #8c7152; border-right: 5px solid #8c7152; }
.bell-target { position: absolute; left: 80%; top: 55%; width: 17%; height: 17%; z-index: 8; border: 0; padding: 0; background: none; transform-origin: center 65%; }.bell-handle { position: absolute; top: 17%; left: 45%; width: 13%; height: 18%; border-radius: 50%; background: #e9c778; }.bell-dome { position: absolute; top: 28%; left: 22%; width: 58%; height: 47%; background: #e4b65d; border-radius: 50% 50% 12% 12%; box-shadow: inset -7px -3px #c59744; }.bell-rim { position: absolute; top: 68%; left: 17%; width: 68%; height: 9%; border-radius: 5px; background: #f1ce7a; }.bell-clapper { position: absolute; top: 76%; left: 43%; width: 17%; height: 10%; background: #bc8f42; border-radius: 0 0 50% 50%; }.bell-spark { position: absolute; top: 0; right: 0; color: #ead289; font-size: 21px; animation: float 2.6s infinite; }.bell-target:hover { transform: rotate(-12deg); }
.do-not-touch { position: absolute; top: 80%; left: 81%; font-size: 8px; color: #d4b573; transform: rotate(-7deg); z-index: 5; white-space: nowrap; }.do-not-touch span { display: block; text-align: center; font-size: 20px; position: absolute; top: -26px; left: 40%; }
.room-floor { position: absolute; bottom: 0; width: 100%; height: 19%; background: #283e35; z-index: -1; border-top: 1px solid #6b7b5b55; }.room-caption { position: absolute; bottom: 4%; width: 100%; text-align: center; font-size: 9px; color: #93a58e; letter-spacing: 1px; }
.fallen-star { position: absolute; left: 11%; top: 73%; background: none; border: 0; padding: 4px 8px; color: #e8ca7f; font-size: 35px; z-index: 8; transform: rotate(-13deg); animation: float 3s infinite; }
.room[data-mood="stirring"] .ear-right { transform: rotate(45deg) scaleX(-1); }.room[data-mood="stirring"] .mouth { height: 6%; }
.room[data-mood="suspicious"] .eye-right { height: 15%; width: 10%; background: #3f4d3c; border: 0; border-radius: 50%; top: 42%; right: 26%; }.room[data-mood="suspicious"] .sleep-letters { opacity: .3; }
.room[data-mood="awake"] .eye, .room[data-mood="revenge"] .eye { height: 17%; width: 10%; background: #3f4d3c; border: 0; border-radius: 50%; top: 41%; }.room[data-mood="awake"] .eye-left, .room[data-mood="revenge"] .eye-left { left: 26%; }.room[data-mood="awake"] .eye-right, .room[data-mood="revenge"] .eye-right { right: 26%; }.room[data-mood="awake"] .sleep-letters, .room[data-mood="revenge"] .sleep-letters { display: none; }.room[data-mood="awake"] .brow { opacity: 1; }.room[data-mood="awake"] .brow-left { transform: rotate(13deg); }.room[data-mood="awake"] .brow-right { transform: rotate(-13deg); }.room[data-mood="awake"] .mouth, .room[data-mood="revenge"] .mouth { background: none; width: 16%; height: 9%; left: 43%; border-bottom: 3px solid #596047; }
.room[data-mood="revenge"] .monster { top: 32%; animation: none; }.room[data-mood="revenge"] .revenge-sign { display: flex; position: absolute; bottom: -27%; left: -8%; width: 116%; height: 52%; background: #ede3bd; color: #41503b; border-radius: 3px; transform: rotate(-5deg); justify-content: center; align-items: center; flex-direction: column; font-size: 16px; box-shadow: 0 4px #b8a879; }.revenge-sign small { font-size: 9px; margin-top: 6px; }.room[data-mood="revenge"] .paw { z-index: 1; bottom: 0; }
.room.react-bell .bell-target { animation: ring .4s ease-in-out; }.room.react-tail .tail-target { animation: wag .45s ease-in-out; }.room.react-hush .monster, .room.react-star .monster { animation: bounce .45s ease-in-out; }.room.react-lamp .ear-left { animation: wag .4s; }
.reaction { padding: 20px 24px 4px; min-height: 135px; }.speaker { display: flex; align-items: center; gap: 9px; font-size: 11px; }.avatar { width: 29px; height: 29px; border-radius: 10px; color: #364535; background: #c8be9a; display: grid; place-items: center; font-size: 11px; font-weight: 650; }.speaker > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; }.speaker small { font-size: 8px; color: #8a9d8b; }.mood-label { margin-left: auto; font-size: 9px; color: #aebc99; background: #35493a; padding: 5px 8px; border-radius: 20px; }
.reaction > p { margin: 16px 0 14px; font-size: 15px; line-height: 1.8; color: #e0e2ca; overflow-wrap: anywhere; min-height: 27px; }
.room-controls { padding: 0 24px 19px; display: flex; justify-content: space-between; gap: 15px; }.room-controls button { background: transparent; border: 1px solid #4b5e4a; color: #c4cdb3; border-radius: 7px; padding: 9px 14px; font-size: 10px; }.room-controls button:hover { background: #334a3a; }.room-controls button:last-child { border-color: transparent; color: #97a68c; }
.findings { border-top: 1px dashed #41523f; margin: 0 24px; padding: 17px 0 0; }.findings > div { display: flex; justify-content: space-between; font-size: 9px; color: #99aa91; }.findings strong { font-weight: 400; font-family: monospace; }.findings ul { margin: 12px 0 0; padding: 0; list-style: none; display: flex; gap: 6px; flex-wrap: wrap; }.findings li { border: 1px solid #54664c; color: #b3c49c; padding: 5px 8px; border-radius: 4px; font-size: 9px; }.findings li.empty-finding { border: 0; padding-left: 0; color: #748a76; }
.play-status { color: #82987f; padding: 0 24px; margin: 13px 0 17px; font-size: 9px; min-height: 13px; }
footer { max-width: 1280px; margin: auto; border-top: 1px solid var(--line); padding: 22px 48px; display: flex; justify-content: space-between; color: #7e9385; font-size: 10px; } footer i { font-style: normal; color: #bca66d; margin-left: 8px; }
dialog { width: min(480px, calc(100% - 32px)); background: #253930; color: #dbe1ca; border: 1px solid #647553; border-radius: 16px; padding: 25px; } dialog::backdrop { background: #071412bb; }.dialog-heading { display: flex; justify-content: space-between; align-items: center; } h2 { font-size: 19px; margin: 0; }.dialog-heading button { background: none; border: 0; color: #cad2b8; font-size: 27px; }dialog p, dialog li { font-size: 12px; line-height: 1.9; }dialog ol { padding-left: 21px; }dialog li { margin: 12px 0; }dialog a { color: #e5c37b; }code { color: #e5c37b; font-size: 11px; overflow-wrap: anywhere; }.settings-note, #settings-status { color: #9cae92; font-size: 10px; }.refresh-status { width: 100%; padding: 12px; background: #c5b271; color: #213629; border: 0; border-radius: 6px; font-size: 12px; }
@keyframes breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.035) translateY(-2px); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes ring { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-20deg); } 75% { transform: rotate(20deg); } }
@keyframes wag { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (max-width: 1050px) { main { grid-template-columns: 1fr 490px; gap: 32px; }.intro { padding-top: 35px; }.drawn-arrow { right: 0; font-size: 40px; }h1 { font-size: 58px; }.intro-rule strong { font-size: 14px; } }
@media (max-width: 800px) { .topbar { padding: 20px 23px; }.brand { font-size: 16px; }.brand span { display: none; }.edition { font-size: 8px; }main { display: block; max-width: 560px; padding: 0 16px; margin-top: 27px; }.intro { padding: 0 8px; }.eyebrow { font-size: 7px; letter-spacing: 1.8px; }h1 { font-size: 40px; margin: 15px 0 12px; letter-spacing: -1.8px; }h1 br { display: none; }.description { font-size: 12px; margin: 0; }.description br { display: none; }.intro-rule, .smallprint { display: none; }.connection { margin-top: 18px; font-size: 9px; }.privacy { font-size: 8px; margin: 6px 0 20px; }.privacy br { display: none; }.room-header { padding: 13px 16px; }.room-header > span:nth-child(2) { font-size: 8px; }.reaction { padding: 17px 18px 2px; min-height: 129px; }.reaction > p { font-size: 14px; }.room-controls { padding: 0 18px 16px; }.findings { margin: 0 18px; }.play-status { padding: 0 18px; }.sleep-sign { padding: 6px 10px; font-size: 8px; }.moon { width: 25px; height: 25px; }.moon::after { width: 23px; height: 23px; }.tail-shape { border-width: 10px; }.room[data-mood="revenge"] .revenge-sign { font-size: 12px; }.revenge-sign small { font-size: 7px; }.do-not-touch { font-size: 6px; }footer { padding: 20px 23px; font-size: 8px; gap: 15px; }footer > span:last-child { text-align: right; } }
.thought-cloud { position: absolute; top: 27%; left: 64%; z-index: 9; background: #e5dfbb; padding: 11px 13px; border-radius: 17px 17px 17px 3px; display: none; gap: 5px; box-shadow: 0 3px 0 #182d2940; pointer-events: none; }
.thought-cloud span { width: 4px; height: 4px; background: #657454; border-radius: 50%; animation: thought-dot 1.3s infinite; }.thought-cloud span:nth-child(2) { animation-delay: .2s; }.thought-cloud span:nth-child(3) { animation-delay: .4s; }
.room.thinking .thought-cloud { display: flex; }.room.thinking .ear-right { animation: ear-listen 2.3s ease-in-out infinite; }.room.thinking .sleep-letters { opacity: .2; }.room.thinking .paw-right { animation: paw-tap 1.6s ease-in-out infinite; }
.comfort-pillow { display: none; position: absolute; left: 58%; top: 60%; width: 14%; height: 12%; background: #d8ccae; border: 3px solid #b9a98c; border-radius: 30%; z-index: 10; color: #95815e; text-align: center; padding-top: 4px; pointer-events: none; }.room.comfort-pillow-active .comfort-pillow { display: block; animation: offer-pillow 1.3s ease-in-out both; }.room.comfort-pillow-active .paw-right { transform: translate(9px, 5px); }
.fan-breeze { display: none; position: absolute; left: 16%; top: 40%; font-size: 70px; line-height: 1; color: #d3e5beaa; z-index: 10; pointer-events: none; }.room.comfort-fan-active .fan-breeze { display: block; animation: gentle-breeze 1.3s ease-out both; }.room.comfort-fan-active .ear-left { animation: fan-ear .4s ease-in-out 3; }
.waiting-play { margin: 0 24px 19px; border: 1px solid #516147; background: #2c4133; border-radius: 11px; padding: 14px; }.waiting-heading { display: flex; align-items: center; gap: 10px; }.waiting-orbit { color: #dbc07b; font-size: 24px; animation: slow-turn 5s linear infinite; }.waiting-heading strong { font-size: 11px; font-weight: 500; color: #d7ddbf; }.waiting-heading p { margin: 5px 0 0; color: #adbc9c; font-size: 10px; line-height: 1.6; }.waiting-badge { margin-left: auto; font-size: 8px; color: #afbd97; white-space: nowrap; }.waiting-actions { display: flex; gap: 9px; margin: 12px 0 9px; }.waiting-actions button { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 1; border: 1px solid #71805a; background: #3b503a; color: #e0e4c9; padding: 10px; border-radius: 7px; font-size: 11px; }.waiting-actions button:hover { background: #4a6045; }.waiting-actions button:active { transform: translateY(1px); }.waiting-actions span { color: #d5be7f; }.waiting-play > small { color: #8da083; font-size: 8px; }
@keyframes thought-dot { 0%, 70%, 100% { transform: translateY(0); opacity: .4; } 35% { transform: translateY(-3px); opacity: 1; } }
@keyframes ear-listen { 0%, 70%, 100% { transform: rotate(29deg) scaleX(-1); } 80%, 90% { transform: rotate(42deg) scaleX(-1); } }
@keyframes paw-tap { 0%, 65%, 100% { transform: translateY(0); } 78% { transform: translateY(-4px); } }
@keyframes offer-pillow { 0% { opacity: 0; transform: translate(70px, 30px) rotate(15deg); } 35%, 75% { opacity: 1; transform: translate(0, 0) rotate(-8deg); } 100% { opacity: 0; transform: translate(-10px, 8px); } }
@keyframes gentle-breeze { 0% { opacity: 0; transform: translateX(-25px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(140px); } }
@keyframes fan-ear { 0%, 100% { transform: rotate(-29deg); } 50% { transform: rotate(-42deg); } }
@keyframes slow-turn { to { transform: rotate(360deg); } }
@media (max-width: 800px) { .waiting-play { margin: 0 18px 16px; padding: 12px; }.waiting-badge { display: none; }.thought-cloud { padding: 8px 10px; }.comfort-pillow { font-size: 12px; }.fan-breeze { font-size: 50px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }