@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

:root{color-scheme:dark;--bg:#111813;--surface:#19221b;--line:#2a342c;--text:#eff2e9;--muted:#849082;--accent:#c4e6a6;--green:#80af78;--deep-green:#477652;--yellow:#d3b66b;--orange:#ce8b5c;--red:#c96961;font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#0c110e;color:var(--text);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:default}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button{touch-action:manipulation}svg{width:24px;height:24px;flex-shrink:0}.app-shell{width:100%;max-width:480px;min-height:100svh;background:var(--bg);margin:auto;position:relative;padding-bottom:calc(88px + env(safe-area-inset-bottom))}.header{height:87px;display:flex;align-items:center;justify-content:space-between;padding:10px 26px 0}.brand{display:flex;align-items:center;font-weight:600;font-size:22px;letter-spacing:1px}.brand-dot{color:var(--accent);margin-left:1px}.brand-mark{display:grid;grid-template-columns:5px 5px;gap:3px;margin-right:12px;transform:rotate(-7deg)}.brand-mark i{width:5px;height:5px;border-radius:1px;background:var(--accent)}.brand-mark i:nth-child(2){opacity:.45}.brand-mark i:nth-child(3){opacity:.65}.header-note{font-size:10px;letter-spacing:1px;color:#97a391;display:flex;align-items:center;gap:6px}.header-note i{width:4px;height:4px;background:var(--accent);border-radius:100%}main{padding:0 26px}.page{animation:appear .35s ease-out}.eyebrow{font-size:10px;letter-spacing:2.5px;color:var(--muted);font-weight:500}.home-intro{padding-top:28px}.home-intro h1{font-size:30px;line-height:1.55;font-weight:500;letter-spacing:1px;margin:12px 0 0}.home-intro h1 span{color:var(--accent)}.night-scene{height:167px;position:relative;margin-top:8px;display:flex;justify-content:center;align-items:center;isolation:isolate}.orbit{position:absolute;width:236px;height:122px;border:1px solid #2d392c;border-radius:50%;transform:rotate(-22deg)}.orbit-two{width:175px;height:175px;border-color:#202c22;transform:rotate(35deg)}.moon-halo{position:absolute;width:170px;height:170px;border-radius:100%;background:radial-gradient(circle,#a9cb8420 0%,#a9cb8407 48%,transparent 72%)}.moon{width:66px;height:66px;color:var(--accent);filter:drop-shadow(0 0 17px #c4e6a620);transform:rotate(-12deg)}.scene-star{position:absolute;background:#7a8e6d;width:3px;height:3px;border-radius:50%}.s1{top:26px;left:22%}.s2{top:47px;right:13%;width:2px;height:2px}.s3{bottom:24px;left:17%;width:2px;height:2px}.s4{bottom:38px;right:27%}.sparkle{position:absolute;right:30%;top:29px;font-size:18px;color:#c4e6a6b0}.orbit-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:#849d6c;left:21%;bottom:34px;box-shadow:0 0 0 5px #111813}.clock-area{text-align:center;margin:3px 0 24px}.clock{font-size:66px;line-height:1.1;letter-spacing:-3px;font-weight:500;font-variant-numeric:tabular-nums}.clock .colon{color:#75846d;margin:0 2px}.clock-context{font-size:11px;color:var(--muted);margin-top:11px;display:flex;align-items:center;justify-content:center;gap:9px}.clock-context i{height:3px;width:3px;background:#64735e;border-radius:50%}.sleep-button{border:0;width:100%;height:66px;padding:0 22px;border-radius:18px;background:var(--accent);color:#24301e;display:flex;align-items:center;justify-content:space-between;transition:transform .15s,background .2s;box-shadow:0 8px 28px #00000018}.sleep-button:active{transform:scale(.98)}.sleep-button span{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:600;letter-spacing:1px}.sleep-button .arrow{font-size:23px;font-weight:400}.sleep-button.saved{background:#273a29;color:var(--accent);border:1px solid #3a5138}.button-caption{min-height:35px;font-size:10px;color:var(--muted);text-align:center;line-height:1.8;padding:11px 0 0;letter-spacing:.4px}.text-button{border:0;padding:0 4px;background:none;color:var(--accent);font-size:11px;text-decoration:underline;text-underline-offset:3px;min-height:32px}.week-section{border-top:1px solid var(--line);padding:20px 0 0;margin-top:12px}.section-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.section-title{font-size:12px;font-weight:500;letter-spacing:.5px;margin:0}.small-link{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:8px;min-height:32px}.small-link span{font-size:16px}.week-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin-top:12px}.week-day{display:flex;flex-direction:column;align-items:center;gap:9px}.day-name{font-size:10px;color:#75816e}.day-square{width:100%;aspect-ratio:1;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#202a22;color:#778571;font-size:11px;font-variant-numeric:tabular-nums;border:1px solid transparent}.day-square.today{border-color:#617456;color:#cfdfbf}.day-square.future{background:#172019;color:#485442}.day-square.recorded{color:#172519}.week-day .tiny-dot{height:3px;width:3px;border-radius:50%;background:transparent}.week-day.current .tiny-dot{background:var(--accent)}.home-footnote{display:flex;justify-content:center;align-items:center;gap:5px;color:#586751;font-size:9px;letter-spacing:.4px;margin:19px 0 0}.home-footnote svg{height:11px;width:11px}.bottom-nav{position:fixed;z-index:10;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;height:calc(77px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:flex;justify-content:center;gap:112px;border-top:1px solid #273127;background:#111813f5;backdrop-filter:blur(16px)}.bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:60px;color:#687762;font-size:10px;position:relative}.bottom-nav a.active{color:var(--accent)}.bottom-nav a.active:before{content:'';position:absolute;top:-1px;height:2px;width:20px;background:var(--accent);border-radius:2px}.bottom-nav svg{width:21px;height:21px}.summary-intro{padding-top:26px}.summary-intro h1{font-size:28px;font-weight:500;letter-spacing:1px;margin:11px 0 10px}.summary-intro p{font-size:11px;line-height:1.8;color:var(--muted);margin:0}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:27px 0 26px}.stat{border-left:1px solid var(--line);padding-left:17px}.stat:first-child{border:0;padding-left:0}.stat-label{font-size:10px;color:var(--muted);margin-bottom:10px}.stat-number{font-size:28px;letter-spacing:-1px;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}.stat-unit{color:#8a987f;font-size:10px;letter-spacing:0;margin-left:4px}.stat-number.lime{color:var(--accent)}.heatmap-card{padding:20px 16px 17px;background:var(--surface);border:1px solid #2a352b;border-radius:18px}.badge{color:#a2ae98;font-size:9px;letter-spacing:.4px;background:#263127;border:1px solid #344032;padding:5px 7px;border-radius:6px}.heatmap-description{font-size:10px;color:var(--muted);margin:10px 0 18px}.heatmap-wrap{display:flex;gap:8px}.heatmap-weekdays{display:grid;grid-template-rows:repeat(7,1fr);font-size:8px;color:#7a8970;gap:4px;padding-top:20px;padding-bottom:1px}.heatmap-weekdays span{display:flex;align-items:center;height:auto;min-height:13px}.heatmap-body{flex:1;min-width:0}.month-labels{height:20px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));font-size:8px;color:#7a8970}.month-labels span{white-space:nowrap}.heatmap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(7,1fr);grid-auto-flow:column;gap:5px}.cell{padding:0;min-width:0;aspect-ratio:1;border:1px solid transparent;border-radius:3px;background:#2b362b;position:relative}.cell:after{content:'';position:absolute;inset:-3px}.cell.future{opacity:.35}.cell.selected{outline:1.5px solid #eff2e9;outline-offset:2px}.cell:focus-visible{outline-offset:2px}.cell.today{border-color:#a0b18e}.cell:disabled{cursor:default}.deep-green{background:var(--deep-green)}.green{background:var(--green)}.yellow{background:var(--yellow)}.orange{background:var(--orange)}.red{background:var(--red)}.heatmap-legend{display:flex;align-items:center;justify-content:flex-end;gap:5px;font-size:8px;color:#8b9880;margin-top:15px}.heatmap-legend i{width:10px;height:10px;border-radius:2px}.heatmap-legend .unrecorded{background:#2b362b;margin-left:8px}.heatmap-divider{border:0;border-top:1px solid #2f392e;margin:17px 0 15px}.cell-detail{display:flex;align-items:center;gap:8px;font-size:10px;min-height:22px;line-height:1.8;color:#a4af9a}.detail-dot{width:6px;height:6px;border-radius:2px;flex-shrink:0}.cell-detail strong{font-size:13px;color:var(--text);font-weight:500;margin-left:auto;font-variant-numeric:tabular-nums}.detail-prompt{color:#85917b}.insight{display:flex;align-items:flex-start;gap:10px;margin:17px 0 25px;padding:0 2px;font-size:11px;color:#a7b39d;line-height:1.8}.insight svg{color:var(--accent);width:16px;height:16px;margin-top:2px}.recent-section{border-top:1px solid var(--line);padding-top:20px}.recent-list{margin-top:8px}.recent-row{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid #222d24;font-size:11px}.recent-date{color:#9da994;display:flex;align-items:center;gap:8px}.recent-date small{font-size:9px;color:#687960}.recent-time{font-size:15px;font-variant-numeric:tabular-nums;letter-spacing:.5px;display:flex;align-items:center;gap:10px}.time-label{font-size:9px;padding:4px 6px;border-radius:4px;background:#263327;color:#9fb591}.time-label.late{background:#3a2a24;color:#d5ac8b}.empty-recent{padding:23px 0;text-align:center;font-size:11px;line-height:1.8;color:#7e8e75}.demo-link{display:block;width:100%;border:1px solid #3e5038;border-radius:10px;background:transparent;color:var(--accent);padding:12px 8px;font-size:11px;margin:15px 0 18px}.demo-banner{background:#293424;border:1px solid #43533a;border-radius:10px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;color:#bacda9;font-size:10px;margin:9px 0 18px;gap:10px}.demo-banner button{border:0;background:none;color:var(--accent);font-size:10px;padding:8px 0;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}.data-note{font-size:9px;line-height:1.9;color:#68785e;margin:22px 0 5px;text-align:center}.toast{position:fixed;z-index:20;max-width:calc(100% - 40px);width:max-content;bottom:calc(98px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%,12px);padding:13px 19px;background:#e6eedb;color:#25301e;border:1px solid #c4d3b5;border-radius:12px;font-size:12px;box-shadow:0 8px 25px #0005;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.toast.visible{opacity:1;transform:translate(-50%,0)}.storage-error{font-size:11px;line-height:1.8;color:#e0b792;background:#30271e;border:1px solid #574330;border-radius:10px;padding:12px;margin:15px 0}.sleep-button:disabled:not(.saved){opacity:.55}.saved .moon{color:#d6ecc3}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes appear{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@media(min-width:481px){.app-shell{border-left:1px solid #233024;border-right:1px solid #233024}.header{height:94px}.home-intro{padding-top:35px}.night-scene{height:190px}.clock-area{margin-bottom:30px}.week-section{margin-top:20px}.bottom-nav{border-left:1px solid #233024;border-right:1px solid #233024}.summary-intro{padding-top:32px}}@media(max-width:350px){main{padding:0 20px}.header{padding-left:20px;padding-right:20px;height:76px}.home-intro{padding-top:18px}.home-intro h1{font-size:27px}.night-scene{height:145px}.clock{font-size:60px}.week-grid{gap:7px}.stat{padding-left:10px}.stat-number{font-size:24px}.heatmap-card{padding-left:12px;padding-right:12px}.heatmap{gap:4px}.header-note{font-size:9px;letter-spacing:0}.summary-intro h1{font-size:25px}.bottom-nav{gap:85px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}} 

/* Keep the language control reachable without crowding the mobile header. */
.header-controls{display:flex;flex-direction:column;align-items:flex-end;gap:1px}.language-picker{position:relative;display:flex;align-items:center;gap:5px;color:#b7c6aa;min-height:44px}.language-picker svg{width:13px;height:13px;pointer-events:none}.language-picker select{font:inherit;font-size:11px;max-width:120px;min-height:44px;background:transparent;color:inherit;border:0;padding:0 1px;cursor:pointer}.language-picker select:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}.language-picker option{background:var(--surface);color:var(--text)}html{scroll-padding-bottom:100px}html[lang=en] .brand{font-size:19px;letter-spacing:0}html[lang=en] .brand-dot{display:none}html[lang=en] .header-note{font-size:8px;letter-spacing:0}html[lang=en] .home-intro h1{font-size:28px;line-height:1.4;letter-spacing:-.5px}html[lang=en] .sleep-button span{font-size:15px;letter-spacing:0}html[lang=en] .clock-context{font-size:10px;gap:7px}html[lang=en] .stat-number .stat-unit{font-size:9px;margin-left:3px}html[lang=en] .stat-number{font-size:26px}html[lang=en] .heatmap-card .section-top{align-items:flex-start}html[lang=en] .heatmap-card .section-title{font-size:11px;line-height:1.5}html[lang=en] .badge{white-space:nowrap}html[lang=en] .demo-banner{line-height:1.8}html[lang=en] .button-caption{line-height:1.8}html[lang=en] .text-button{margin-left:3px}@media(max-width:350px){html[lang=en] .brand{font-size:17px}html[lang=en] .brand-mark{margin-right:8px}html[lang=en] .home-intro h1{font-size:25px}html[lang=en] .stat-number{font-size:23px}html[lang=en] .clock-context{font-size:9px}.language-picker select{font-size:10px;max-width:108px}}