:root{--bg:#f7f6f0;--white:#fffefb;--ink:#345363;--muted:#7e9199;--blue:#7fa6ba;--pale:#e3eef2;--line:#dce5e7;--clay:#d7a394;--sage:#aabca8;--lilac:#b6b2ce;--yellow:#e4cd92}
*{box-sizing:border-box}
body{margin:0;background:#e9eeec;color:var(--ink);font-family:system-ui,-apple-system,"Noto Sans",sans-serif;font-size:14px}
button,input,textarea,select{font:inherit;color:inherit}
button,a,input{ -webkit-tap-highlight-color:transparent}
button{border:0;background:none;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,canvas:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
button:disabled{opacity:.4;cursor:default}
a{color:inherit}
aside{position:fixed;left:max(5vw,calc(50% - 570px));top:12vh;width:330px}
.wordmark{text-decoration:none;font-size:24px;font-weight:600}
.wordmark span{display:block;font-size:10px;letter-spacing:3px;margin-top:12px;color:var(--muted)}
aside h1{font-size:43px;font-weight:500;line-height:1.55;margin:65px 0 24px}
aside p{line-height:2.2;color:var(--muted)}
aside small{font-size:11px;letter-spacing:2px;color:var(--muted)}
.side-art{height:140px;display:flex;align-items:center;gap:14px}
.side-art span{width:65px;height:60px;background:var(--blue);border-radius:45% 55% 39% 61%}
.side-art span:nth-child(2){background:var(--clay);height:80px;border-radius:20% 25% 45% 45%}
.side-art span:nth-child(3){background:var(--sage);transform:rotate(-12deg);border-radius:5px}
main{width:430px;margin:0 max(6vw,calc(50% - 510px)) 0 auto;background:var(--bg);min-height:100dvh;padding:25px 24px 120px;position:relative}
.topline{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:11px;height:34px}
.topline button{padding:8px 0}
.topline svg{vertical-align:middle}
.eyebrow{text-transform:uppercase;font-size:10px;letter-spacing:2px;color:var(--muted)}
h1{font-size:27px;line-height:1.5;font-weight:550;margin:20px 0 6px;letter-spacing:-.5px}
h2{font-size:18px;line-height:1.55;font-weight:550;margin:0 0 12px}
h3{font-size:15px;font-weight:550;margin:0 0 10px}
p{line-height:1.9}
.muted{color:var(--muted);font-size:12px;line-height:1.9}
.subtitle{margin:0 0 28px}
.small{color:var(--muted);font-size:10px;line-height:1.8}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.section{margin-top:26px}
.card{background:var(--white);border-radius:24px;padding:22px;margin:18px 0}
.pale{background:var(--pale)}
.primary,.secondary{width:100%;border-radius:28px;padding:17px 20px;min-height:52px;line-height:1.4;display:block}
.primary{background:var(--blue);color:var(--white);font-weight:550}
.secondary{background:var(--white)}
.textlink{font-size:12px;padding:8px 0;color:var(--ink)}
.badge{font-size:10px;display:inline-block;padding:9px 16px;border-radius:20px;background:var(--pale)}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:15px 0}
.chip{background:var(--white);border-radius:22px;padding:10px 15px;font-size:12px;min-width:70px}
.chip.on{background:var(--pale);box-shadow:inset 0 0 0 1px #b3c9d4}
.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:20px 0}
.tools button{padding:16px 4px;border-radius:22px;background:var(--white);font-size:12px;min-height:49px}
.tools button.on{background:var(--blue);color:var(--white)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tile{background:var(--white);padding:10px 8px 14px;border-radius:21px;text-align:center;min-width:0}
.tile svg,.tile img{width:100%;height:100px;object-fit:contain}
.tile strong{display:block;font-size:12px;font-weight:500;margin:8px 0}
.tile small{color:var(--muted);font-size:10px}
.nav{position:fixed;bottom:max(12px,env(safe-area-inset-bottom));width:398px;margin-left:-8px;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;z-index:20;border:1px solid #e5e9e4;background:#fffefbef;backdrop-filter:blur(15px);border-radius:36px;padding:6px 4px}
.nav button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;height:52px;border-radius:27px;font-size:10px;color:var(--muted)}
.nav button.on{background:var(--pale);color:var(--ink)}
.nav .add{width:56px;height:56px;margin:-19px auto 0;background:var(--blue);color:white;padding:0;display:grid;place-items:center;box-shadow:0 0 0 5px var(--bg)}
.nav .add svg{display:block;width:27px;height:27px}
.hero{background:var(--pale);border-radius:26px;padding:22px 18px 14px;margin-top:22px;overflow:hidden}
.hero h2{font-size:19px}
.rack{display:flex;align-items:center;justify-content:center;gap:2px;height:132px}
.rack canvas{width:32%;height:130px;touch-action:none;transition:transform .2s;cursor:grab}
.rack canvas:hover{transform:scale(1.12);z-index:2}
.rack+.small{text-align:center}
.daily{position:relative;overflow:hidden;min-height:175px;background:var(--white)}
.daily>div:first-child{position:relative;z-index:1;width:64%}
.daily .primary{font-size:12px;padding:12px;min-height:42px;width:150px}
.daily canvas{position:absolute;right:0;top:28px;width:140px;height:130px;touch-action:none;cursor:grab}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.two .card{margin:0;padding:20px 17px;display:block;text-align:left}
.two svg{margin-bottom:14px}
.two p{margin:0}
.entry{display:flex;align-items:center;justify-content:space-between;padding:20px;border-radius:24px;margin:14px 0;text-align:left;width:100%;gap:12px}
.entry svg{flex:0 0 76px;height:74px}
.entry img{width:76px;height:74px;flex:0 0 76px;object-fit:contain;border-radius:14px}
.entry h2{margin-bottom:6px}
.entry p{font-size:12px;margin:0;color:var(--muted)}
textarea,input[type=text]{border:0;background:transparent;outline:none;width:100%}
textarea{min-height:210px;resize:vertical;line-height:1.95;margin:15px 0;font-size:14px}
input[type=text]{font-size:18px;padding:12px 0;line-height:1.6}
.stage{border-radius:28px;overflow:hidden;position:relative;margin:20px 0;background:var(--pale)}
.stage canvas{width:100%;height:340px;display:block;touch-action:none;cursor:grab}
.stage .hint{position:absolute;bottom:10px;left:12px;right:12px;font-size:10px;color:var(--muted);text-align:center;pointer-events:none}
.stagebar{border-radius:24px;background:var(--white);padding:10px 14px}
.stagebar .badge{margin-right:8px}
.parameter{background:var(--white);border-radius:22px;padding:17px;margin:16px 0}
.parameter label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px;margin:8px 0;color:var(--muted)}
input[type=range]{accent-color:var(--blue);width:54%}
input[type=range]{height:4px;border-radius:3px;background:#dce5e7;appearance:none;-webkit-appearance:none}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;background:#7fa6ba;width:14px;height:14px;border-radius:50%}
input[type=range]::-moz-range-thumb{border:0;background:#7fa6ba;width:14px;height:14px;border-radius:50%}
.work-actions{display:flex;gap:8px;margin:12px 0}
.work-actions button{font-size:11px;background:var(--white);border-radius:18px;padding:10px 14px;flex:1}
.palette{display:flex;gap:10px;align-items:center}
.swatch{width:26px;height:26px;border-radius:50%;border:3px solid transparent}
.swatch.on{outline:1px solid var(--ink);outline-offset:2px}
.calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
.weekday{font-size:10px;color:var(--muted);padding:10px 0}
.day{min-height:68px;border-radius:15px;position:relative;padding:7px 2px;font-size:11px;display:flex;align-items:center;flex-direction:column}
.day img{width:32px;height:32px;object-fit:contain;border-radius:8px;margin-top:4px}
.day.current{background:var(--pale)}
.day.has{background:#fffefb}
.day.selected{outline:1px solid var(--blue)}
.calendar-actions{margin:18px 0}
.empty{text-align:center;padding:36px 12px;color:var(--muted);font-size:12px;line-height:2}
.empty svg{display:block;width:100px;height:100px;margin:auto auto 15px}
.savedart{width:100%;max-height:340px;object-fit:contain;border-radius:22px;background:#e8edef}
.radio-option{display:flex;align-items:center;gap:12px;background:var(--white);border-radius:20px;padding:19px 17px;margin:12px 0;line-height:1.6}
.radio-option:has(:checked){background:var(--pale)}
input[type=radio]{accent-color:var(--blue)}
.progress{height:4px;background:var(--line);margin:25px 0 35px;border-radius:3px}
.progress span{height:4px;background:var(--blue);display:block}
.quiz-controls{display:flex;gap:15px;margin-top:30px;align-items:center}
.quiz-controls>button:first-child{min-width:55px}
.science{font-size:13px;line-height:1.95}
.science h3{font-size:17px;line-height:1.6;margin-top:20px}
.science details{font-size:11px;color:var(--muted);margin-top:18px}
.science a{display:block}
.science .explain{background:var(--pale);padding:15px;border-radius:16px}
.summary-line{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:12px;gap:16px}
.summary-line span:first-child{color:var(--muted)}
.collage{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.collage img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--bg);border-radius:16px}
.listbtn{padding:18px;background:var(--white);display:block;border-radius:20px;margin:12px 0;width:100%;text-align:left}
.listbtn small{display:block;color:var(--muted);font-size:10px;margin-top:8px}
.danger{color:#a66f65}
.card-print{background:var(--white);padding:20px;border-radius:24px;margin:22px 10px}
.card-print .savedart{margin:20px 0}
.privacy{display:flex;align-items:center;gap:10px;font-size:12px;margin:20px 0}
.finish-preview{position:relative}
.finish-preview .savedart{height:280px}
.screen-footer{margin-top:22px;text-align:center}
#toast{display:none;position:fixed;bottom:100px;left:50%;transform:translateX(-50%);padding:14px 22px;background:var(--ink);color:var(--white);font-size:12px;border-radius:24px;z-index:60;max-width:90vw;width:max-content;line-height:1.7}
dialog{border:0;background:var(--bg);color:var(--ink);padding:25px;border-radius:26px;max-width:380px;width:calc(100% - 40px);line-height:1.9}
dialog::backdrop{background:#34536366}
dialog .primary{margin-top:20px}
.delete-row{display:flex;gap:10px;margin-top:20px}
.delete-row button{flex:1}
.month-quote{padding:10px 0;border-bottom:1px solid var(--line);font-size:12px;line-height:1.9}
.install-help{background:var(--pale);padding:18px;border-radius:20px;font-size:12px;line-height:1.9}
.export-label{display:block;font-size:12px;margin:15px 0}
input[type=file]{max-width:100%;font-size:12px}
@media(max-width:800px){aside{display:none}
body{background:var(--bg)}
main{margin:0 auto;box-shadow:none;width:100%;max-width:480px}
.nav{width:calc(100% - 32px);max-width:448px}
}
@media(min-width:801px){main{box-shadow:0 0 80px #3453630c}
.nav{width:398px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}
}
@media print{aside,.nav,.topline,.subtitle,.export-controls,#toast{display:none!important}
body,main{background:white;width:100%;margin:0;padding:0}
.card-print{width:100mm;margin:auto;break-inside:avoid}
.card-print .savedart{height:90mm}
main>h1{display:none}
}