@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800&display=swap');
:root{--blue:#2457ed;--ink:#202c45;--muted:#8790a1;--paper:#fafbf7;--line:#e7eae5}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Outfit','Noto Sans SC',sans-serif;font-size:14px}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button{border:0}button:focus-visible,a:focus-visible{outline:3px solid #87b7ff;outline-offset:4px}header{height:90px;max-width:1360px;margin:auto;padding:0 54px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:8px;color:var(--blue);font-size:31px;font-weight:800;letter-spacing:-1px}.brand-flower{font-size:42px;line-height:1}.brand-sub{font-size:18px;margin-left:4px;letter-spacing:1px}.header-note{font-size:10px;letter-spacing:2px;color:#7e8799;display:flex;gap:10px;align-items:center}i{width:6px;height:6px;background:#8bc8a2;border-radius:50%;display:inline-block}.sound-btn{padding:9px 13px;background:transparent;border:1px solid #dce1e2;border-radius:30px;color:#5f6b80;font-size:12px}.sound-btn:first-letter{color:var(--blue)}main{max-width:1252px;margin:auto}.hero{display:grid;grid-template-columns:1fr 1fr;min-height:465px;align-items:center;padding:35px 38px 24px}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:600;color:var(--blue)}.mini-star{font-size:18px;vertical-align:middle;margin-right:7px}h1{font-size:49px;line-height:1.38;letter-spacing:-1.8px;margin:20px 0 18px;font-weight:800}h1 span{color:var(--blue);font-family:Outfit,sans-serif;font-size:61px;letter-spacing:-2.8px} .hero-copy>p{line-height:1.9;color:#7a8494;font-size:14px}.hero-tags{display:flex;gap:18px;font-size:11px;color:#7c879a;margin-top:26px}.hero-tags span:first-child{color:var(--blue)}.hero-art{position:relative;height:405px;display:flex;align-items:center;justify-content:center}.orb{position:absolute;width:340px;height:340px;background:#edf3ff;border-radius:50%;border:1px solid #e7edfa}.mascot{width:385px;position:relative;mix-blend-mode:multiply;animation:float 5s ease-in-out infinite}.mascot img{width:100%;display:block}.lid{position:absolute;width:8%;height:19%;top:36.5%;border-radius:55%;background:radial-gradient(ellipse at center,#32acf3 20%,#3aaff3 66%,#45b6f5 95%);transform:rotate(6deg);opacity:0}.lid:after{content:'';width:83%;height:18%;border-bottom:4px solid #19375d;border-radius:50%;position:absolute;top:35%;left:8%}.lid-one{left:45.2%}.lid-two{left:59.6%;top:38%}.sleeping .lid{opacity:1}.spark{position:absolute;color:var(--blue);z-index:2}.s1{font-size:34px;right:44px;top:64px}.s2{font-size:23px;left:45px;bottom:101px}.orbit-text{position:absolute;top:19px;font-size:9px;letter-spacing:2px;color:#879fcd;transform:rotate(-8deg)}.speech{position:absolute;bottom:19px;background:white;border:1px solid #e3e9f8;box-shadow:0 5px 15px #20468b04;padding:12px 18px;border-radius:12px;font-size:11px;color:#6f819c;transform:rotate(-3deg)}.speech span{color:var(--blue);margin-left:12px}.art-label{position:absolute;bottom:-6px;font-size:8px;letter-spacing:2px;color:#9ca9bb}.play-section{padding:25px 24px 0}.section-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:22px}.section-title .eyebrow{color:#9098a5;font-size:9px}h2{font-size:22px;margin:8px 0 0;letter-spacing:-.5px;font-weight:700}.section-title h2 span{font-family:Arial;color:var(--blue);margin-left:10px;font-weight:400}.autosave{display:flex;align-items:center;gap:7px;font-size:10px;color:#8c96a3;margin-bottom:4px}.play-layout{display:grid;grid-template-columns:230px 1fr 278px;gap:20px;align-items:stretch}.task-nav{display:flex;flex-direction:column;gap:9px}.task{display:flex;text-align:left;align-items:center;gap:12px;background:transparent;border:1px solid #e3e7e3;border-radius:12px;padding:17px 13px;color:#6f7989;transition:.2s}.task.active{background:var(--blue);border-color:var(--blue);color:white;box-shadow:0 6px 12px #2457ed15}.task-num{font-size:12px;opacity:.6;align-self:start;padding-top:3px}.task b{font-size:13px;font-weight:600}.task small{display:block;font-size:10px;margin-top:6px;opacity:.65}.task-arrow{margin-left:auto;font-size:17px;opacity:.65}.nav-note{font-size:11px;line-height:1.9;color:#939caa;padding:12px 15px 0;display:flex;gap:13px}.nav-note>span{font-size:27px;color:#aebedb}.task-panel{background:white;border:1px solid var(--line);border-radius:17px;padding:26px;min-width:0}.panel-tag{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:1px;color:#8d9ab1}.panel-tag span{background:#edf3ff;border-radius:5px;padding:5px 7px;color:var(--blue);font-size:12px}.task-panel h3{font-size:23px;margin:17px 0 10px;letter-spacing:-.5px}.panel-desc{font-size:11px;color:#929aaa;line-height:1.8;margin:0 0 22px}label{display:block;font-size:11px;font-weight:500;margin-bottom:8px}label span{color:#5a81eb}input,textarea{display:block;width:100%;border:1px solid #e5e9ed;background:#fbfcfd;border-radius:8px;padding:12px 13px;outline:none;font-size:12px;color:var(--ink);transition:.2s}input:focus,textarea:focus{border-color:#6a99ff;box-shadow:0 0 0 3px #2457ed09}input::placeholder,textarea::placeholder{color:#b1bac8}textarea{resize:vertical;min-height:85px} .field{margin-bottom:17px}.primary{width:100%;background:var(--blue);color:white;border-radius:9px;padding:13px;font-size:12px;font-weight:500;transition:.2s}.primary:hover{background:#1544d2;transform:translateY(-1px)}.form-bottom{font-size:9px;text-align:center;color:#a5aebc;margin:10px 0 0}.name-pair{display:grid;grid-template-columns:1fr 22px 1fr;gap:8px;align-items:center}.name-pair>span{color:var(--blue);text-align:center}.night-card{background:#eef3ff;border:1px solid #e0e8fc;border-radius:17px;padding:24px 20px;display:flex;flex-direction:column}.night-card .eyebrow{font-size:7px;letter-spacing:1px;color:#889dcb}.night-card h3{font-size:17px;margin:12px 0 23px;display:flex;justify-content:space-between}.night-card h3>span{color:var(--blue)}.stats{display:grid;grid-template-columns:1fr 1fr;padding-bottom:22px;border-bottom:1px dashed #cad7f1}.stats>div{display:flex;flex-direction:column;gap:5px}.stats>div+div{padding-left:22px;border-left:1px solid #dce4f6}.stats strong{font-size:37px;color:var(--blue);font-weight:500;line-height:1.1}.stats span{color:#8391ab;font-size:10px}.awakened{display:flex;justify-content:space-between;font-size:11px;margin-top:20px;color:#7082a5}.awakened b{color:var(--blue);font-weight:500}.bobo-garden{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:17px 0 8px}.garden-bobo{position:relative;border-radius:50%;aspect-ratio:1;background:#e2eafa;overflow:hidden;opacity:.42;filter:grayscale(1)}.garden-bobo img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}.garden-bobo.lit{filter:none;background:#cfe7ff;opacity:1;animation:pop .7s}.garden-note{font-size:9px;line-height:1.8;color:#91a0bb;margin:7px 0 16px}.night-footer{font-size:9px;color:#7d91ba;border-top:1px solid #dce5f8;padding-top:16px;margin-top:auto;white-space:nowrap}.night-footer span{margin-right:6px}.records-section{padding:29px 24px 35px}.records-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.records-heading h3{font-size:14px;font-weight:600;margin:0}.records-heading h3 span{font:11px Outfit;margin-left:7px;color:#8b9db8;background:#edf1f6;padding:3px 7px;border-radius:5px}.records-heading button{font-size:10px;color:#7d8aa0;background:transparent}.empty{border:1px dashed #dce2e9;border-radius:12px;text-align:center;padding:25px;color:#a7afbd;font-size:11px;width:100%}.empty>span{font-size:22px;color:#b9c7de;margin-right:10px;vertical-align:middle}.records{display:flex;gap:12px;flex-wrap:wrap}.record{background:white;border:1px solid var(--line);border-radius:12px;padding:17px;flex:1 1 230px;min-width:0;max-width:390px;position:relative}.record b{font-size:13px;display:block;padding-right:20px}.record p{font-size:11px;color:#8590a3;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}.record small{font-size:9px;color:#a8b1bf}.record .delete{position:absolute;top:12px;right:10px;background:transparent;color:#a3adbc;font-size:16px}.signature-image{display:block;width:100%;height:75px;object-fit:contain;background:#f4f7ff;border-radius:6px;margin-top:10px}footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:25px 24px 30px;color:#9da6b4}footer .brand{font-size:22px}footer .brand-flower{font-size:29px}footer .brand-sub{font-size:12px}footer>span{font-size:10px}footer>small{font-size:8px;letter-spacing:1.3px}dialog{border:1px solid #dce7ff;border-radius:23px;padding:30px;max-width:440px;width:calc(100% - 32px);color:var(--ink);box-shadow:0 25px 100px #10235730}dialog::backdrop{background:#14234b65;backdrop-filter:blur(7px)}.dialog-header{display:flex;align-items:start;justify-content:space-between}.dialog-header h2{font-size:21px}.close{background:#edf2fa;border-radius:50%;width:28px;height:28px;color:#6c7b94;font-size:20px;flex-shrink:0}#sign-hint{color:#8b96a9;font-size:12px;line-height:1.8;margin:17px 0 20px}.typed-signature{font-weight:600}.signature-tip{font-size:10px;color:#9aa7bb;line-height:1.8}#sign-error{color:#d25b68;font-size:11px;min-height:18px}#wake-dialog{text-align:center;overflow:hidden}.wake-close{position:absolute;right:16px;top:16px}.wake-mascot{position:relative;margin:20px auto 0;width:260px;mix-blend-mode:multiply;animation:wiggle 1.3s ease-in-out 2}.wake-mascot img{width:100%;display:block}.wake-star{position:absolute;right:2px;top:5px;font-size:35px;color:#77a6ff;animation:pop 1s infinite alternate}#wake-dialog h2{font-size:43px;color:var(--blue);margin:0;font-family:Outfit}#wake-dialog h2 span{color:#61afff}#wake-dialog p{color:#7c8ca7;font-size:12px;line-height:1.8;margin:12px 0 24px}.text-btn{display:block;margin:14px auto 0;background:transparent;color:#8b9cba;font-size:11px}.signature-preview{display:flex;align-items:center;justify-content:center;border:1px dashed #cddaf5;background:#f7f9ff;border-radius:12px;height:110px;margin:17px 0}.signature-preview img{height:96px;mix-blend-mode:multiply}.signature-preview>span{color:#90a5cc;font-size:11px;padding:0 10px}.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,20px);background:#21365a;color:white;padding:13px 23px;border-radius:30px;opacity:0;transition:.25s;pointer-events:none;z-index:10;font-size:12px;width:max-content;max-width:90%}.toast.show{opacity:1;transform:translate(-50%,0)}@keyframes float{50%{transform:translateY(-9px) rotate(1deg)}}@keyframes wiggle{0%,100%{transform:rotate(0) scale(1)}15%,45%,75%{transform:rotate(-8deg) scale(1.06)}30%,60%,90%{transform:rotate(8deg) scale(1.06)}}@keyframes pop{0%{transform:scale(.6)}65%{transform:scale(1.14)}100%{transform:scale(1)}}.awake{animation:wiggle 1.4s ease-in-out!important}.storage-warning{color:#bd7b22!important}@media(min-width:1450px){header{max-width:1400px}.hero{min-height:490px}}@media(max-width:1050px){header{padding:0 28px}.play-layout{grid-template-columns:195px 1fr 230px;gap:13px}.task-panel{padding:21px}.night-card{padding:23px 16px}.night-footer{font-size:8px}.task{padding:17px 10px;gap:8px}.hero{padding:30px}.hero h1{font-size:43px}.hero-art{height:380px}.mascot{width:340px}.orb{width:300px;height:300px}.hero-tags{gap:12px;font-size:10px}}@media(max-width:800px){.header-note{display:none}.play-layout{grid-template-columns:180px 1fr}.night-card{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 25px}.night-card>.eyebrow,.night-card>h3,.night-card>.stats{grid-column:1}.night-card>.awakened{grid-column:2;grid-row:1/3;align-self:center;margin:0}.night-card>.bobo-garden{grid-column:2;grid-row:3/5;margin:0;align-self:start;grid-template-columns:repeat(8,1fr)}.night-card>.garden-note{grid-column:2}.night-footer{grid-column:1/-1;margin-top:13px}.stats{border:0;padding-bottom:0}.hero h1{font-size:35px}.hero h1 span{font-size:49px}.hero-art{height:330px}.mascot{width:290px}.orb{width:260px;height:260px}.hero{min-height:390px;padding:25px}.orbit-text{font-size:7px;top:25px}.speech{font-size:9px;bottom:10px;padding:10px}.art-label{display:none}.hero-tags{flex-direction:column;gap:9px}.s1{right:12px;top:55px}.s2{left:10px}}@media(max-width:560px){header{height:73px;padding:0 22px}.brand{font-size:26px}.brand-flower{font-size:34px}.brand-sub{font-size:15px}.sound-btn{font-size:11px;padding:8px 11px}.hero{grid-template-columns:1fr;padding:30px 24px 10px;gap:0;position:relative}.hero-copy{z-index:1}.hero .eyebrow{font-size:9px}.hero h1{font-size:37px;margin:14px 0 12px}.hero h1 span{font-size:47px}.hero-copy>p{font-size:12px;line-height:1.9}.hero-tags{flex-direction:row;gap:13px;margin-top:17px;font-size:9px}.hero-art{height:295px;margin-top:8px}.mascot{width:295px}.orb{width:260px;height:260px}.orbit-text{top:7px;font-size:8px}.s1{right:38px;top:45px}.s2{left:35px;bottom:70px}.speech{bottom:0;font-size:10px}.play-section{padding:30px 18px 0}.section-title{margin-bottom:18px}.section-title h2{font-size:18px}.section-title .eyebrow{font-size:8px}.autosave{font-size:8px;max-width:72px;line-height:1.7;gap:5px}.autosave i{flex-shrink:0}.play-layout{display:flex;flex-direction:column;gap:16px}.task-nav{display:grid;grid-template-columns:1fr 1fr;gap:8px}.task{padding:13px 10px;border-radius:10px;gap:8px}.task b{font-size:11px}.task small{font-size:8px;margin-top:4px}.task-num{font-size:10px}.task-arrow{font-size:13px}.nav-note{display:none}.task-panel{padding:23px}.task-panel h3{font-size:23px}.panel-desc{font-size:12px}.field{margin-bottom:19px}input,textarea{font-size:16px;padding:12px}label{font-size:12px}.primary{font-size:13px;padding:15px}.night-card{padding:22px 19px;gap:0 18px}.night-card .eyebrow{font-size:6px;letter-spacing:.8px}.night-card h3{font-size:15px;margin-bottom:17px}.stats strong{font-size:31px}.stats>div+div{padding-left:15px}.stats span{font-size:9px}.night-card>.awakened{font-size:10px}.night-card>.bobo-garden{grid-template-columns:repeat(4,1fr);gap:4px}.garden-note{font-size:8px;line-height:1.6}.night-footer{font-size:9px;padding-top:13px}.records-section{padding:28px 18px}.records-heading h3{font-size:13px}.records-heading button{font-size:9px}.record{max-width:none}.empty{font-size:10px;padding:23px 10px}footer{padding:22px 18px;flex-wrap:wrap;gap:15px}footer small{display:none}footer>span{font-size:9px}.dialog-header h2{font-size:20px}dialog{padding:25px}.name-pair{gap:4px;grid-template-columns:1fr 18px 1fr}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.lid{width:9%;height:19.5%;top:36.3%;background-image:url("assets/bobo.png");background-size:1120% 530%;background-position:37% 36%;box-shadow:0 0 3px 2px #3eaef3}.lid-one{left:44.5%}.lid-two{left:58.8%;top:37.8%}.wake-mascot .lid{transition:opacity .3s}.wake-mascot .lid:after{border-bottom-width:3px}

.autosave{max-width:270px;line-height:1.7;overflow-wrap:anywhere}@media(max-width:560px){.autosave{max-width:110px;font-size:9px}}

/* Keep save status on one line; wrap the title row when the screen is narrow. */
.section-title{column-gap:12px;row-gap:10px;flex-wrap:wrap}
.autosave{flex-shrink:0;width:max-content;max-width:none;white-space:nowrap;overflow-wrap:normal}
.autosave.storage-warning{width:auto;max-width:100%;white-space:normal;overflow-wrap:anywhere}



.header-actions{display:flex;align-items:center;gap:10px;min-width:0}.profile-button{display:flex;gap:5px;align-items:center;max-width:190px;border:1px solid #dce4fa;border-radius:24px;background:#edf3ff;color:#2457ed;font-size:11px;padding:9px 12px}.profile-button #profile-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-button>small{flex-shrink:0;font-size:9px;opacity:.65}.profile-intro{color:#8790a1;font-size:12px;line-height:1.9;margin:17px 0 22px}#profile-error{color:#d25b68;font-size:11px;min-height:18px}#profile-dialog input{font-size:16px}.text-btn[hidden]{display:none}@media(max-width:560px){.header-actions{gap:7px}.profile-button{max-width:135px;font-size:10px;padding:8px 10px}.profile-button>small{display:none}.sound-btn span{display:none}.sound-btn{padding:8px 10px}}