:root{
  --zc-seven-night:#0c1429;--zc-seven-blue:#173550;--zc-seven-sky:#275b79;
  --zc-seven-ink:#e9eef7;--zc-seven-muted:#afc3d8;--zc-seven-line:#91afd04d;
  --zc-seven-gold:#ffe4b2;--zc-seven-glow:#8dc9ed;
}
*{box-sizing:border-box}
html,body,#app{min-height:100%;margin:0}
body{background:var(--zc-seven-night);color:var(--zc-seven-ink);font:400 15px/1.85 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
button,input{font:inherit}
button{cursor:pointer;color:inherit}
button:focus-visible,input:focus-visible{outline:2px solid var(--zc-seven-gold);outline-offset:4px}
.seven-shell{position:relative;min-height:100dvh;overflow:hidden;background:radial-gradient(circle at 49% 46%,var(--zc-seven-blue),var(--zc-seven-night) 70%);display:grid;place-items:center}
.seven-shell[data-stage=practice]{background:linear-gradient(165deg,#152d47,#235374 70%,#193b58)}
.seven-shell[data-stage=finale]{background:radial-gradient(circle at 50% 60%,#263b64,#11192c 57%,#080e1f)}
.quiet-card{position:relative;z-index:1;max-width:500px;width:calc(100% - 48px);padding:36px 10px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--zc-seven-muted);font-weight:650}
.quiet-card h1{font:400 clamp(34px,4.8vw,58px)/1.2 Georgia,"Times New Roman",serif;letter-spacing:.18em;margin:6px 0 0}
.quiet-card p{margin:0;max-width:410px;color:#d1dceb;line-height:2}
.quiet-card>p:nth-of-type(2){margin-top:18px}
.quiet-card small{font-size:11px;color:var(--zc-seven-muted);letter-spacing:.05em}
.quiet-symbol{position:relative;width:90px;height:74px;margin-bottom:5px}
.quiet-symbol span{position:absolute;left:50%;top:50%;width:30px;height:30px;border-radius:50%;border:1px solid #d9e7f6aa;transform:translate(-50%,-50%)}
.quiet-symbol span:nth-child(1){width:35px;height:35px;background:#dfefff15}
.quiet-symbol span:nth-child(2){width:58px;height:58px;opacity:.65}
.quiet-symbol span:nth-child(3){width:84px;height:84px;opacity:.3}
.soft-button{min-width:145px;min-height:48px;margin-top:18px;padding:10px 27px;border:1px solid #afc6e0aa;border-radius:99px;background:#ffffff0b;color:var(--zc-seven-ink);letter-spacing:.2em;font-size:13px;transition:background .25s,transform .25s}
.soft-button:hover{background:#ffffff25;transform:translateY(-2px)}
.day-card{max-width:600px}
.day-card h1{letter-spacing:.07em}
.thought-label{align-self:center;margin-top:10px;color:var(--zc-seven-muted);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
#thought-input{width:min(100%,460px);padding:16px 18px;border:1px solid #9fb8d180;border-radius:16px;background:#ffffff10;color:var(--zc-seven-ink);text-align:center;outline:none;letter-spacing:.03em}
#thought-input::placeholder{color:#c4d7ed77}
.preset{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:4px}
.preset button{border:1px solid #8faac473;border-radius:99px;background:#ffffff0a;padding:6px 12px;font-size:11px;color:#cad9ea}
.preset button:hover{background:#ffffff24}
.old-thoughts{margin-top:4px;padding:11px 20px;border:1px solid #9eb8d052;border-radius:18px;background:#ffffff09;width:min(100%,460px)}
.old-thoughts span{font-size:9px;letter-spacing:.22em;color:var(--zc-seven-muted)}
.old-thoughts p{font-size:12px;margin:3px 0;opacity:.75}
.field-error{min-height:1.5em;font-size:12px;color:#ffcfb8!important}
.practice-space{position:relative;width:100%;height:100dvh;min-height:500px;overflow:hidden}
.night-sky{position:absolute;inset:0;background:radial-gradient(ellipse at 40% 60%,#66b3df1a,transparent 45%),radial-gradient(ellipse at 75% 20%,#bedbf315,transparent 35%),linear-gradient(160deg,#132b45,#214d6e 72%,#1a3d5d)}
.night-sky:after{content:"";position:absolute;inset:0;background-image:radial-gradient(#ffffff40 1px,transparent 1.5px);background-size:38px 38px;mask-image:linear-gradient(transparent,#000 40%,transparent);opacity:.22}
.practice-hud{position:absolute;z-index:4;top:20px;left:50%;transform:translateX(-50%);width:min(400px,calc(100% - 100px));text-align:center}
.hud-top{display:flex;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:.25em;color:#d5e7f4}
.meter{height:3px;margin-top:8px;background:#b6d1e655}.meter>div{height:100%;background:#dfecf9;box-shadow:0 0 8px #d6ecff;transition:width .2s}
.meter-label{display:block;margin-top:5px;font-size:9px;letter-spacing:.4em;color:#d0e3f2}
.practice-tools{position:absolute;z-index:6;right:20px;top:15px;display:flex;gap:8px}
.practice-tools button{min-height:38px;border:1px solid #e4f0fa55;border-radius:99px;background:#0c1d3450;padding:6px 13px;font-size:11px}
.practice-tools button:hover{background:#e3f1fa28}
.bubble-field{position:absolute;inset:68px 0 90px;overflow:hidden;z-index:2}
.thought-bubble{position:absolute;max-width:min(200px,45vw);padding:9px 16px;border:1px solid #dbeaf681;border-radius:99px;background:#d6eaff16;color:#e8f3fbc7;font-size:12px;white-space:normal;text-align:center;box-shadow:inset 0 0 22px #d1ebff14,0 0 25px #97d4ff12;backdrop-filter:blur(7px);animation:float-away 8.5s ease-out forwards}
.thought-bubble:hover{background:#d6eaff27}.thought-bubble.touched{animation:touch-flash .45s ease-out forwards;background:#f5d8d83d}
.breath-orb{position:absolute;z-index:3;left:50%;top:51%;width:180px;height:180px;border:1px solid #dbedff5b;border-radius:50%;display:grid;place-items:center;transform:translate(-50%,-50%);box-shadow:0 0 55px #8accf422,inset 0 0 45px #b3e3ff1d;animation:breathe 8s ease-in-out infinite;pointer-events:none}
.breath-orb:before,.breath-orb:after{content:"";position:absolute;inset:-20px;border:1px solid #b7d9f329;border-radius:50%}.breath-orb:after{inset:-41px;opacity:.4}
.breath-orb span{font-size:16px;color:#e1eaf6;letter-spacing:.12em}
.practice-hint{position:absolute;z-index:4;bottom:8%;left:50%;transform:translateX(-50%);width:min(600px,90%);text-align:center;font-size:13px;color:#d3e3f0bf;letter-spacing:.04em}
.pause-layer{position:absolute;z-index:7;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#07101fd4;text-align:center}
.pause-layer h2{font:400 36px Georgia,serif}.pause-layer p{color:var(--zc-seven-muted)}
.ending-card h1{letter-spacing:.05em}.ending-card blockquote,.finale-space blockquote{font:italic 24px/1.6 Georgia,serif;color:var(--zc-seven-gold);margin:18px 0}
.ending-moon{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 38% 36%,#fff4d8,#d3daed 58%,#8cabc2);box-shadow:0 0 75px #dcddff4f;margin:22px auto}
.held-word{font-style:italic;color:var(--zc-seven-gold)!important}
.day-dots{display:flex;gap:9px;margin:13px 0}.day-dots span{width:14px;height:14px;border-radius:50%;border:1px solid #dcecf3a0}.day-dots span.complete{background:var(--zc-seven-gold);box-shadow:0 0 9px #ffdb9c}
.finale-space{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;max-width:780px;width:calc(100% - 36px);min-height:100dvh;padding:80px 15px 40px;text-align:center}
.finale-space h1{font:400 clamp(50px,7vw,95px)/1.08 Georgia,serif;letter-spacing:.04em;margin:200px 0 18px;text-shadow:0 0 30px #d1e6ff67}
.finale-space>p{font-size:17px;color:#d2dfee;line-height:1.8}
.finale-moon{position:absolute;z-index:-1;top:63px;left:50%;transform:translateX(-50%);width:250px;height:250px;border-radius:50%;background:radial-gradient(circle at 38% 33%,#fff7e0,#e6dfdb 60%,#a4bed4);box-shadow:0 0 110px #d1e7ff47,0 0 220px #d1e7ff24}
.finale-stars{position:absolute;z-index:-2;inset:0;background-image:radial-gradient(#fff9 1px,transparent 1.6px);background-size:43px 43px;opacity:.35}
.word-constellation{display:flex;flex-wrap:wrap;justify-content:center;gap:11px;max-width:600px;margin-top:15px}.word-constellation span{padding:7px 13px;border:1px solid #e7eef676;border-radius:99px;color:#e5ecf5a8;font-size:12px;transform:translateY(calc(var(--zc-index)*2px))}
.finale-space small{margin-top:15px;color:var(--zc-seven-muted)}
.connection-line{position:fixed;z-index:10;bottom:9px;left:50%;transform:translateX(-50%);max-width:80vw;color:#d2e3f1a8;font-size:10px;text-align:center;pointer-events:none}
@keyframes float-away{0%{opacity:0;transform:translate3d(0,25px,0) scale(.85)}12%,72%{opacity:.85}100%{opacity:0;transform:translate3d(var(--zc-drift-x),-60px,0) scale(.93)}}
@keyframes touch-flash{to{opacity:0;transform:scale(1.3)}}
@keyframes breathe{0%,100%{transform:translate(-50%,-50%) scale(.86)}50%{transform:translate(-50%,-50%) scale(1.15)}}
@media(max-width:600px){.quiet-card{width:calc(100% - 36px);padding:36px 5px}.quiet-card h1{font-size:37px}.quiet-card p{font-size:13px}.practice-tools{top:84px;right:12px}.practice-tools button{font-size:10px;padding:6px 8px}.practice-hud{width:calc(100% - 30px);top:19px}.bubble-field{top:110px;bottom:75px}.breath-orb{width:138px;height:138px}.practice-hint{bottom:6%;font-size:12px}.finale-space h1{margin-top:210px}.finale-moon{width:220px;height:220px}}
@media(max-height:580px){.quiet-card{padding:10px 5px;gap:7px}.quiet-symbol{display:none}.quiet-card h1{font-size:34px}.quiet-card>p:nth-of-type(2){margin-top:4px}.soft-button{margin-top:6px}.practice-tools{top:65px}.breath-orb{width:130px;height:130px}}
[data-motion=reduced] *{animation-duration:.01ms!important;transition-duration:.01ms!important}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
[data-motion=reduced] .thought-bubble,[data-motion=reduced] .breath-orb{animation:none!important;opacity:.85!important}
@media(prefers-reduced-motion:reduce){.thought-bubble,.breath-orb{animation:none!important;opacity:.85!important}}