/* ==========================================================================
   破茧 BreakCocoon · 设计系统
   色彩：深空蓝 #0B1E3D / 流星金 #F5A623 / 突破绿 #7ED321 / 茧房红 #D0021B
   界面隐喻：从「蚕茧」到「蝴蝶」——随破茧度提升，环境光逐渐变亮
   ========================================================================== */

/* ---------- 1. 变量与主题 ---------- */
:root {
  --sp-900:#040B18; --sp-800:#061428; --sp-700:#0B1E3D; --sp-600:#12305F; --sp-500:#1A3F7A;
  --gold:#F5A623; --gold-soft:#FFC961; --brk:#7ED321; --red:#D0021B; --mist:#8FB2E8;
  --ink:#E8EFF9; --ink-2:#A9BCD8; --ink-3:#6C82A6;
  --bg:transparent;
  --panel:rgba(12,32,62,.62);
  --panel-2:rgba(8,24,48,.5);
  --panel-solid:#0B1E3D;
  --hair:rgba(143,178,232,.18);
  --hair-2:rgba(143,178,232,.32);
  --shadow:0 18px 44px -22px rgba(0,0,0,.85);
  --glow:0 0 22px rgba(245,166,35,.22);
  --veil:.55;               /* 茧丝浓度 */
  --ambient:99,150,220;     /* 环境光颜色 */
  --stage-lift:0;           /* 0→1，破茧度带来的亮度提升 */
  --r:14px;
  --safe-b:env(safe-area-inset-bottom,0px);
}
html[data-theme="dawn"] {
  --ink:#0C1C33; --ink-2:#3B5474; --ink-3:#6E86A6;
  --panel:rgba(255,255,255,.72);
  --panel-2:rgba(244,248,255,.66);
  --panel-solid:#F4F8FF;
  --hair:rgba(11,30,61,.14);
  --hair-2:rgba(11,30,61,.26);
  --shadow:0 16px 40px -24px rgba(12,32,64,.4);
  --veil:.18;
  --ambient:245,166,35;
}
html[data-stage="1"] { --veil:.44; --stage-lift:.16; }
html[data-stage="2"] { --veil:.32; --stage-lift:.36; }
html[data-stage="3"] { --veil:.2;  --stage-lift:.58; }
html[data-stage="4"] { --veil:.1;  --stage-lift:.8; }

/* ---------- 2. 基础重置（未启用 tailwind preflight）---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh; background:var(--sp-900); color:var(--ink);
  font-synthesis-weight:none; -webkit-tap-highlight-color:transparent;
  overflow-x:hidden; line-height:1.7;
  background-image:
    radial-gradient(1100px 620px at 78% -8%, rgba(26,63,122,.55), transparent 62%),
    radial-gradient(760px 520px at 8% 12%, rgba(18,48,95,.48), transparent 60%),
    linear-gradient(180deg, var(--sp-800) 0%, var(--sp-900) 46%, #02070F 100%);
  background-attachment:fixed;
  transition:background-color .5s ease, color .5s ease;
}
html[data-theme="dawn"] body{
  background-color:#F2F7FF;
  background-image:
    radial-gradient(980px 620px at 80% -6%, rgba(245,166,35,.20), transparent 60%),
    radial-gradient(820px 560px at 6% 10%, rgba(143,178,232,.30), transparent 62%),
    linear-gradient(180deg,#EAF2FF 0%,#F6FAFF 40%,#FFFDF7 100%);
}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
.mono{font-family:"Roboto Mono",Consolas,Menlo,monospace;font-variant-numeric:tabular-nums}
.serif{font-family:"Noto Serif SC","Songti SC",serif}

/* ---------- 3. 星空 / 茧幕 / 化蝶 ---------- */
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:calc(.9 - var(--stage-lift)*.45);transition:opacity .6s}
#veil{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:var(--veil);transition:opacity .8s ease;
  background:
    repeating-linear-gradient(112deg, rgba(143,178,232,.07) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(-64deg, rgba(143,178,232,.05) 0 1px, transparent 1px 62px),
    radial-gradient(120% 90% at 50% 50%, transparent 38%, rgba(2,6,14,.55) 100%);
}
html[data-theme="dawn"] #veil{background:
  repeating-linear-gradient(112deg, rgba(11,30,61,.05) 0 1px, transparent 1px 52px),
  repeating-linear-gradient(-64deg, rgba(11,30,61,.035) 0 1px, transparent 1px 68px);}
#metamorph{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.butterfly{position:absolute;width:26px;height:26px;opacity:0;animation:fly linear infinite}
.butterfly i{display:block;width:11px;height:14px;background:linear-gradient(120deg,var(--gold),var(--brk));border-radius:60% 40% 50% 50%;float:left;animation:flap .5s ease-in-out infinite alternate;transform-origin:right center;box-shadow:0 0 12px rgba(245,166,35,.5)}
.butterfly i+i{transform-origin:left center;float:right;animation-name:flap2}
@keyframes flap{from{transform:rotateY(0) }to{transform:rotateY(62deg)}}
@keyframes flap2{from{transform:rotateY(0)}to{transform:rotateY(-62deg)}}
@keyframes fly{
  0%{opacity:0;transform:translate3d(-8vw,105vh,0) scale(.5) rotate(6deg)}
  12%{opacity:.9}
  40%{transform:translate3d(34vw,58vh,0) scale(1) rotate(-10deg)}
  70%{transform:translate3d(62vw,26vh,0) scale(.9) rotate(8deg)}
  100%{opacity:0;transform:translate3d(96vw,-8vh,0) scale(.7)}
}

/* ---------- 4. 布局 ---------- */
.wrap{width:100%;max-width:74rem;margin-inline:auto;padding-inline:1.05rem}
.wrap-wide{max-width:82rem}
.app{position:relative;z-index:3;min-height:70vh;padding:5.6rem 0 4.5rem;outline:none}
.section{margin-top:3.4rem}
.grid{display:grid;gap:1rem}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.row{display:flex;gap:.7rem;align-items:center}
.row-w{flex-wrap:wrap}
.between{justify-content:space-between}
.center{align-items:center;justify-content:center}
.col{display:flex;flex-direction:column}
.gap-half{gap:.5rem}.gap-2{gap:1.1rem}.gap-3{gap:1.8rem}
.mt-a{margin-top:auto}
.text-c{text-align:center}
.hide{display:none !important}

/* ---------- 5. 导航 ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:40;height:3.5rem;
  display:flex;align-items:center;gap:1rem;padding-inline:1rem;
  background:linear-gradient(180deg,rgba(4,11,24,.92),rgba(4,11,24,.55));
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--hair);
}
html[data-theme="dawn"] .nav{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.6))}
.nav-brand{display:flex;align-items:center;gap:.55rem;color:var(--gold);flex:0 0 auto}
.brand-mark{display:grid;place-items:center;width:2.1rem;height:2.1rem;border:1px solid var(--hair-2);border-radius:11px;background:rgba(245,166,35,.08)}
.brand-text b{font-family:"Noto Serif SC",serif;font-size:1.08rem;letter-spacing:.14em;color:var(--ink);display:block;line-height:1.1}
.brand-text i{font-style:normal;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.nav-links{display:flex;align-items:center;gap:.15rem;margin-left:auto;flex-wrap:nowrap}
.navgrp{position:relative;flex:0 0 auto}
.navgrp>button,.navgrp>a{display:flex;align-items:center;gap:.4rem;padding:.42rem .72rem;border-radius:9px;font-size:.87rem;color:var(--ink-2);white-space:nowrap;transition:.2s}
.navgrp>button:hover,.navgrp>a:hover,.navgrp>button[aria-current="page"]{color:var(--ink);background:rgba(143,178,232,.1)}
.navgrp>button[aria-current="page"]{color:var(--gold)}
.navmenu{position:absolute;top:calc(100% + .5rem);left:0;min-width:15rem;padding:.4rem;border-radius:12px;background:rgba(6,20,40,.96);border:1px solid var(--hair-2);box-shadow:var(--shadow);display:none;z-index:50}
html[data-theme="dawn"] .navmenu{background:rgba(255,255,255,.97)}
.navgrp:hover .navmenu,.navgrp.open .navmenu,.navgrp:focus-within .navmenu{display:block}
.navmenu a{display:flex;justify-content:space-between;gap:1rem;padding:.45rem .6rem;border-radius:8px;font-size:.85rem;color:var(--ink-2)}
.navmenu a:hover{background:rgba(143,178,232,.12);color:var(--ink)}
.navmenu a .mono{color:var(--ink-3);font-size:.72rem}
.nav-right{display:flex;align-items:center;gap:.45rem;margin-left:auto;flex:0 0 auto}
.icon-btn{width:2.1rem;height:2.1rem;display:grid;place-items:center;border:1px solid var(--hair);border-radius:10px;color:var(--ink-2);transition:.2s}
.icon-btn:hover{color:var(--gold);border-color:var(--hair-2)}
.ring-btn{display:flex;align-items:center;gap:.35rem;padding:.1rem .5rem .1rem .1rem;border:1px solid var(--hair);border-radius:999px;color:var(--gold)}
.ring-bg{fill:none;stroke:rgba(143,178,232,.2);stroke-width:3}
.ring-fg{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;stroke-dasharray:100.5;stroke-dashoffset:100.5;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .8s ease}
.ring-num{font-size:.72rem}
.drawer{position:fixed;inset:3.5rem 0 0;z-index:39;background:rgba(4,11,24,.97);backdrop-filter:blur(10px);overflow:auto;padding:1rem 1rem calc(6rem + var(--safe-b))}
html[data-theme="dawn"] .drawer{background:rgba(248,251,255,.97)}
.drawer h4{margin:.9rem 0 .4rem;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.drawer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.drawer-grid a{padding:.8rem;border:1px solid var(--hair);border-radius:12px;background:var(--panel-2)}
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:41;display:flex;justify-content:space-around;
  padding:.4rem .3rem calc(.4rem + var(--safe-b));
  background:linear-gradient(0deg,rgba(4,11,24,.97),rgba(4,11,24,.8));backdrop-filter:blur(12px);
  border-top:1px solid var(--hair);
}
html[data-theme="dawn"] .tabbar{background:linear-gradient(0deg,rgba(255,255,255,.97),rgba(255,255,255,.78))}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:.15rem;font-size:.66rem;color:var(--ink-3);padding:.2rem .5rem;border-radius:9px;min-width:3.4rem}
.tabbar a i{font-size:1.05rem}
.tabbar a[data-on="1"]{color:var(--gold)}
.only-mobile{display:none}

/* ---------- 6. 卡片与文字 ---------- */
.panel{position:relative;padding:1.15rem;border:1px solid var(--hair);border-radius:var(--r);background:var(--panel);box-shadow:var(--shadow);backdrop-filter:blur(6px)}
.panel-2{background:var(--panel-2)}
.panel-hover{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.panel-hover:hover{transform:translateY(-3px);border-color:var(--hair-2);box-shadow:var(--shadow),0 0 0 1px rgba(245,166,35,.18)}
.panel-accent{border-left:2px solid var(--gold)}
.kicker{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);font-family:"Roboto Mono",monospace}
.h-hero{font-family:"Noto Serif SC",serif;font-weight:900;font-size:clamp(2rem,6.4vw,3.9rem);line-height:1.16;letter-spacing:.02em}
.h1{font-family:"Noto Serif SC",serif;font-weight:700;font-size:clamp(1.5rem,3.6vw,2.1rem);line-height:1.3}
.h2{font-family:"Noto Serif SC",serif;font-weight:700;font-size:clamp(1.16rem,2.4vw,1.42rem)}
.h3{font-weight:700;font-size:1rem;letter-spacing:.02em}
.lede{color:var(--ink-2);font-size:clamp(.95rem,1.6vw,1.06rem);max-width:44rem}
.sub{color:var(--ink-3);font-size:.85rem}
.tiny{font-size:.75rem;color:var(--ink-3)}
.gold{color:var(--gold)}.green{color:var(--brk)}.red{color:var(--cocoon-soft,#FF4A5C)}.mist{color:var(--mist)}
.grad-gold{background:linear-gradient(96deg,var(--gold-soft),var(--gold) 45%,var(--brk));-webkit-background-clip:text;background-clip:text;color:transparent}
.rule{height:1px;background:linear-gradient(90deg,var(--hair-2),transparent);margin:1.1rem 0}
.dropcap::first-letter{font-family:"Noto Serif SC",serif;font-size:2.6em;float:left;line-height:.9;padding:.06em .12em 0 0;color:var(--gold)}
.prose p{margin:.62rem 0;color:var(--ink-2)}
.prose b,.prose strong{color:var(--ink);font-weight:700}
.prose em{color:var(--gold);font-style:normal}
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.14rem .5rem;border-radius:999px;font-size:.7rem;border:1px solid var(--hair-2);color:var(--ink-2);background:rgba(143,178,232,.07)}
.badge-gold{color:var(--gold);border-color:rgba(245,166,35,.42);background:rgba(245,166,35,.1)}
.badge-green{color:var(--brk);border-color:rgba(126,211,33,.42);background:rgba(126,211,33,.1)}
.badge-red{color:var(--cocoon-soft);border-color:rgba(208,2,27,.5);background:rgba(208,2,27,.12)}
.chip{padding:.32rem .7rem;border-radius:999px;border:1px solid var(--hair);color:var(--ink-2);font-size:.8rem;transition:.2s}
.chip:hover{border-color:var(--hair-2);color:var(--ink)}
.chip[aria-pressed="true"]{background:rgba(245,166,35,.14);border-color:rgba(245,166,35,.5);color:var(--gold)}

/* ---------- 7. 按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.62rem 1.15rem;border-radius:11px;font-size:.92rem;font-weight:500;border:1px solid var(--hair-2);color:var(--ink);background:rgba(143,178,232,.09);transition:transform .18s ease,background .2s ease,box-shadow .2s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.99)}
.btn-primary{background:linear-gradient(102deg,var(--gold),#E08B0B);color:#1A1204;border-color:transparent;box-shadow:var(--glow);font-weight:700}
.btn-primary:hover{box-shadow:0 0 30px rgba(245,166,35,.42)}
.btn-green{background:linear-gradient(102deg,var(--brk),#5FAE12);color:#0B1B02;border-color:transparent;font-weight:700}
.btn-ghost{border-color:transparent;background:transparent;color:var(--ink-2)}
.btn-ghost:hover{color:var(--gold)}
.btn-sm{padding:.36rem .72rem;font-size:.8rem;border-radius:9px}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-lg{padding:.85rem 1.6rem;font-size:1rem}

/* ---------- 8. 表单 ---------- */
.field{display:block;margin:.55rem 0}
.field>span{display:block;font-size:.78rem;letter-spacing:.1em;color:var(--ink-3);margin-bottom:.3rem}
.input,textarea.input,select.input{width:100%;padding:.6rem .8rem;border-radius:10px;border:1px solid var(--hair);background:rgba(4,11,24,.5);color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
html[data-theme="dawn"] .input{background:rgba(255,255,255,.75)}
.input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,166,35,.16)}
textarea.input{min-height:5.2rem;resize:vertical;line-height:1.7}
.likert{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.3rem}
.likert button{aspect-ratio:1/1;border:1px solid var(--hair);border-radius:9px;font-family:"Roboto Mono",monospace;font-size:.8rem;color:var(--ink-3);transition:.18s;min-height:2.3rem}
.likert button:hover{border-color:var(--hair-2);color:var(--ink)}
.likert button[aria-checked="true"]{background:linear-gradient(180deg,rgba(245,166,35,.9),rgba(184,122,22,.9));color:#1A1204;border-color:transparent;font-weight:700;transform:translateY(-2px)}
.opt{display:flex;gap:.6rem;align-items:flex-start;padding:.7rem .8rem;border:1px solid var(--hair);border-radius:11px;background:var(--panel-2);cursor:pointer;transition:.2s}
.opt:hover{border-color:var(--hair-2)}
.opt[data-on="1"]{border-color:rgba(245,166,35,.6);background:rgba(245,166,35,.1)}
.opt[data-on="2"]{border-color:rgba(126,211,33,.6);background:rgba(126,211,33,.1)}
.opt[data-on="3"]{border-color:rgba(208,2,27,.55);background:rgba(208,2,27,.12)}
.opt .mark{flex:0 0 auto;width:1.15rem;height:1.15rem;border-radius:6px;border:1px solid var(--hair-2);margin-top:.22rem;display:grid;place-items:center;font-size:.7rem;color:#0B1B02}
.opt[data-on="1"] .mark,.opt[data-on="2"] .mark{background:var(--gold);border-color:transparent}
.opt[data-on="2"] .mark{background:var(--brk)}
.slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:99px;background:linear-gradient(90deg,var(--red),var(--gold),var(--brk));outline:none}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--ink);border:3px solid var(--gold);cursor:grab;box-shadow:0 2px 10px rgba(0,0,0,.5)}
.slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--ink);border:3px solid var(--gold);cursor:grab}

/* ---------- 9. 度量条 / 图表容器 ---------- */
.meter{position:relative;height:9px;border-radius:99px;background:rgba(143,178,232,.13);overflow:hidden}
.meter>i{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px;background:linear-gradient(90deg,var(--mist),var(--gold));transition:width 1s cubic-bezier(.22,.9,.24,1)}
.meter[data-tone="green"]>i{background:linear-gradient(90deg,var(--brk),var(--gold-soft))}
.meter[data-tone="red"]>i{background:linear-gradient(90deg,var(--red),var(--cocoon-soft))}
.meter-ticks{position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,transparent 0 12.4%,rgba(4,11,24,.55) 12.4% 12.6%)}
.chart{width:100%;height:20rem}
.chart-sm{height:13.5rem}
.chart-lg{height:26rem}
.quadrant{position:relative;aspect-ratio:1/1;max-width:30rem;margin-inline:auto;width:100%}

/* ---------- 10. 破茧动画（首页）---------- */
.cocoon-stage{position:relative;display:grid;place-items:center;min-height:min(46vh,22rem)}
.cocoon-svg{width:min(72vw,19rem);height:auto;filter:drop-shadow(0 0 30px rgba(245,166,35,.25))}
.cocoon-svg .thread{stroke:rgba(143,178,232,.5);fill:none;stroke-width:.7;animation:unwrap 6s ease-in-out infinite alternate}
.cocoon-svg .shell{stroke:var(--gold);fill:rgba(245,166,35,.08);stroke-width:1.3;stroke-dasharray:6 5;animation:spin 26s linear infinite}
.cocoon-svg .core{fill:var(--brk);opacity:.85;animation:breathe 3.4s ease-in-out infinite}
.cocoon-svg .crack{stroke:#fff;stroke-width:1.1;fill:none;stroke-dasharray:60;stroke-dashoffset:60;animation:crack 6s ease-in-out infinite alternate}
@keyframes unwrap{from{opacity:.15;transform:translateY(2px)}to{opacity:.75;transform:translateY(-2px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{r:7;opacity:.6}50%{r:9.4;opacity:1}}
@keyframes crack{0%,55%{stroke-dashoffset:60}100%{stroke-dashoffset:0}}
.spark{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--gold-soft);box-shadow:0 0 12px var(--gold);animation:rise 4.5s ease-in infinite}
@keyframes rise{0%{opacity:0;transform:translateY(0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translateY(-130px) scale(1.4)}}

/* ---------- 11. 模块卡 / 列表 ---------- */
.mod-card{display:flex;flex-direction:column;gap:.55rem;padding:1.1rem;border-radius:var(--r);border:1px solid var(--hair);background:var(--panel);position:relative;overflow:hidden;min-height:9.6rem;transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s}
.mod-card::after{content:"";position:absolute;inset:auto -30% -60% auto;width:12rem;height:12rem;border-radius:50%;background:radial-gradient(circle,rgba(245,166,35,.22),transparent 65%);opacity:0;transition:opacity .4s}
.mod-card:hover{transform:translateY(-5px);border-color:rgba(245,166,35,.45)}
.mod-card:hover::after{opacity:1}
.mod-card .ic{width:2.2rem;height:2.2rem;border-radius:11px;display:grid;place-items:center;background:rgba(245,166,35,.12);border:1px solid rgba(245,166,35,.3);color:var(--gold);font-size:1.05rem}
.mod-card p{font-size:.83rem;color:var(--ink-3)}
.mod-card .num{position:absolute;top:.7rem;right:.85rem;font-family:"Roboto Mono",monospace;font-size:.7rem;color:var(--ink-3);opacity:.7}
.list-row{display:flex;gap:.8rem;align-items:flex-start;padding:.75rem .1rem;border-bottom:1px dashed var(--hair)}
.list-row:last-child{border-bottom:0}
.dot{flex:0 0 auto;width:.5rem;height:.5rem;border-radius:50%;margin-top:.62rem;background:var(--gold)}
.table th{text-align:left;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);padding:.45rem .5rem;border-bottom:1px solid var(--hair-2)}
.table td{padding:.6rem .5rem;border-bottom:1px dashed var(--hair);font-size:.88rem;color:var(--ink-2)}
.table tr:hover td{background:rgba(143,178,232,.05)}

/* ---------- 12. 弹层 / 提示 ---------- */
.modal{position:fixed;inset:0;z-index:60;display:grid}
.modal[hidden]{display:none}
.modal-back{position:absolute;inset:0;background:rgba(2,6,14,.72);backdrop-filter:blur(3px)}
.modal-box{position:relative;margin:auto;width:min(46rem,100%);max-height:min(86vh,44rem);overflow:auto;background:var(--panel-solid);border:1px solid var(--hair-2);border-radius:16px;box-shadow:0 30px 80px -30px rgba(0,0,0,.9);animation:pop .32s cubic-bezier(.2,.9,.2,1)}
html[data-theme="dawn"] .modal-box{background:#fff}
.modal-x{position:sticky;top:0;float:right;margin:.6rem .6rem -.2rem 0;width:2rem;height:2rem;border-radius:9px;background:rgba(143,178,232,.14);color:var(--ink-2);z-index:2}
.modal-x:hover{color:var(--gold)}
.modal-body{padding:1.15rem 1.3rem 1.6rem}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.toast{position:fixed;left:50%;bottom:calc(5.2rem + var(--safe-b));transform:translate(-50%,1.5rem);z-index:70;padding:.6rem 1.05rem;border-radius:11px;background:rgba(6,20,40,.96);border:1px solid var(--hair-2);color:var(--ink);font-size:.86rem;opacity:0;pointer-events:none;transition:.3s;max-width:min(30rem,90vw);box-shadow:var(--shadow)}
html[data-theme="dawn"] .toast{background:rgba(255,255,255,.97)}
.toast[data-on="1"]{opacity:1;transform:translate(-50%,0)}
.skip-link{position:absolute;left:-9999px;top:0;z-index:99;padding:.5rem .8rem;background:var(--gold);color:#1A1204;border-radius:8px}
.skip-link:focus{left:.6rem;top:.6rem}

/* ---------- 13. 揭示动画 / 日历 ---------- */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
[data-reveal].in{opacity:1;transform:none}
.heat{display:grid;grid-template-columns:repeat(auto-fill,minmax(13px,1fr));gap:3px}
.heat i{aspect-ratio:1/1;border-radius:3px;background:rgba(143,178,232,.12)}
.heat i[data-l="1"]{background:rgba(245,166,35,.35)}
.heat i[data-l="2"]{background:rgba(245,166,35,.62)}
.heat i[data-l="3"]{background:var(--gold)}
.heat i[data-l="4"]{background:var(--brk)}
.stars{display:inline-flex;gap:.15rem;color:var(--gold)}
.timeline{position:relative;padding-left:1.5rem}
.timeline::before{content:"";position:absolute;left:.42rem;top:.4rem;bottom:.4rem;width:1px;background:linear-gradient(180deg,var(--gold),transparent)}
.tl-item{position:relative;margin-bottom:.9rem}
.tl-item::before{content:"";position:absolute;left:-1.2rem;top:.55rem;width:.55rem;height:.55rem;border-radius:50%;background:var(--sp-700);border:2px solid var(--gold)}
.tl-item[data-done="1"]::before{background:var(--brk);border-color:var(--brk)}
.accordion{border:1px solid var(--hair);border-radius:12px;background:var(--panel-2);overflow:hidden}
.accordion>button{width:100%;display:flex;justify-content:space-between;gap:1rem;padding:.8rem .9rem;text-align:left;color:var(--ink)}
.accordion>button:hover{background:rgba(143,178,232,.07)}
.acc-body{padding:0 .9rem .9rem;color:var(--ink-2);font-size:.9rem}

/* ---------- 14. 响应式 ---------- */
@media (max-width:1080px){ .nav-links{display:none} .only-mobile{display:inline-flex} .drawer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:860px){ .g4{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){
  .app{padding:4.6rem 0 5.5rem}
  .wrap{padding-inline:.9rem}
  .g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}
  .grid[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr) !important}
  .likert{grid-template-columns:repeat(7,minmax(0,1fr));gap:.22rem}
  .modal-box{max-height:92vh;border-radius:14px}
  .modal-body{padding:1rem}
  .h1{font-size:1.42rem}
  .brand-text i{display:none}
  .site-foot{padding-bottom:calc(4.5rem + var(--safe-b))}
}
@media (min-width:641px){ .tabbar{display:none} }
@media (max-width:400px){ .only-mobile{display:inline-flex} .tabbar a{font-size:.6rem;min-width:3rem} }

/* ---------- 15. 其它 ---------- */
.site-foot{position:relative;z-index:3;margin-top:4rem;padding:2.2rem 0 2.6rem;border-top:1px solid var(--hair);background:linear-gradient(180deg,transparent,rgba(4,11,24,.55))}
html[data-theme="dawn"] .site-foot{background:linear-gradient(180deg,transparent,rgba(255,255,255,.5))}
.foot-line{font-size:1.02rem;color:var(--ink-2);letter-spacing:.04em}
.foot-meta{margin-top:.6rem;font-size:.78rem;color:var(--ink-3)}
.foot-meta a{color:var(--mist);text-decoration:underline;text-underline-offset:3px}
.hr-glow{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5}
.mote{position:absolute;border-radius:50%;background:rgba(232,239,249,.85);animation:tw 4s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.15}50%{opacity:.9}}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(143,178,232,.25);border-radius:9px}
::-webkit-scrollbar-track{background:transparent}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media print{ #sky,#veil,#metamorph,.nav,.tabbar,.drawer,.toast{display:none !important} body{background:#fff;color:#111} .panel{border:1px solid #ccc;background:#fff} }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}
  #metamorph{display:none}
}