/* Podium Study chrome layer: new type, one shape language, chrome buttons on every page,
   and the home page's liquid metal, intro, word reveals and scroll story.
   Loaded after silver.css so it wins where they overlap. */
:root{
  --display:"Syne","Avenir Next",system-ui,sans-serif;
  --serif:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ghost:#C4C7D0;
  --enter:cubic-bezier(.22,1,.36,1);
  --release:cubic-bezier(.34,1.4,.64,1);
  --shape-lg:30px 8px 30px 8px; --shape-md:16px 5px 16px 5px; --shape-sm:12px 4px 12px 4px;
}
body{font-family:var(--body)}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.025em}
.logo{font-family:var(--display);font-weight:700;letter-spacing:-.02em}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.02em}
.serif em{font-style:italic}
.mark{border-radius:9px 3px 9px 3px}

/* chrome buttons: light and black chrome, a sheen that sweeps on hover, instant press, springy release */
.btn{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--shape-sm);font-family:var(--body);font-weight:600;letter-spacing:.005em;
  color:var(--ink);border:1px solid #BFC4CF;
  background:linear-gradient(180deg,#FFFFFF 0%,#F1F2F6 46%,#E3E6EC 54%,#F6F7FA 100%);
  box-shadow:inset 0 1px 0 #FFFFFF,inset 0 -1px 0 #C9CDD6,0 1px 2px #1F24300F,0 4px 12px #1F24300A;
  transition:transform 240ms var(--release),box-shadow 200ms ease,border-color 200ms ease,background-color 200ms ease}
.btn::after{content:"";position:absolute;inset:-1px;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,#FFFFFFD9 46%,#FFFFFF 50%,transparent 64%);transform:translateX(-120%);transition:transform 640ms var(--enter)}
.btn.primary{color:#FFFFFF;border-color:#15171C;border-radius:var(--shape-sm);
  background:linear-gradient(180deg,#5A5F6B 0%,#2E3139 44%,#1B1D23 56%,#3A3D47 100%);
  box-shadow:inset 0 1px 0 #FFFFFF40,inset 0 -1px 0 #00000066,0 1px 2px #1F243026,0 6px 16px #1F24301F}
.btn.primary::after{background:linear-gradient(105deg,transparent 30%,#FFFFFF33 46%,#FFFFFF59 50%,transparent 64%)}
.btn.small{border-radius:10px 3px 10px 3px}
.btn:active{transform:scale(.96);transition-duration:0s}
.btn[disabled]{transform:none}
.btn canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block;pointer-events:none;border-radius:inherit}
.has-gl .btn[data-gl]{background:#E9EBF0;border-color:#B6BBC6;text-shadow:0 1px 0 #FFFFFFB3}
.has-gl .btn.primary[data-gl]{background:#1B1D23;border-color:#0B0C0F;text-shadow:0 1px 2px #000000B3}
@media (hover:hover) and (pointer:fine){
  .btn:hover{border-color:#9FA5B3;box-shadow:inset 0 1px 0 #FFFFFF,inset 0 -1px 0 #C9CDD6,0 2px 4px #1F243014,0 10px 22px #1F243014}
  .btn.primary:hover{border-color:#000000;background:linear-gradient(180deg,#5A5F6B 0%,#2E3139 44%,#1B1D23 56%,#3A3D47 100%);box-shadow:inset 0 1px 0 #FFFFFF4D,inset 0 -1px 0 #00000066,0 2px 4px #1F24302E,0 12px 26px #1F24302E}
  .has-gl .btn.primary[data-gl]:hover{background:#1B1D23}
  .btn:not([disabled]):hover::after{transform:translateX(120%)}
}

/* one shape language for cards */
.card,.setcard,.setcard:nth-child(3n+2),.setcard:nth-child(3n+3){border-radius:22px 7px 22px 7px}
.forge,.auth,.ws-panel{border-radius:var(--shape-lg)}

/* ---------- home page ---------- */
.silver-home .bar{position:sticky}
.scroll-line{position:absolute;left:0;right:0;bottom:-1px;height:2px;transform-origin:0 50%;transform:scaleX(0);pointer-events:none;
  background:linear-gradient(90deg,#B6BAC4,#FFFFFF 20%,#8D93A1 40%,#E5E0FA 60%,#DDEDFB 80%,#B6BAC4)}
.mf-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px;align-items:center;padding:48px 0 32px;min-height:520px}
.mf-hero h1{font-size:clamp(56px,7.2vw,98px);line-height:.96;max-width:10ch;margin:0 0 26px}
.mf-hero .lede{font-size:19px;line-height:1.55;color:var(--muted);max-width:36ch;margin:0 0 32px}
.mf-cta{display:flex;gap:12px;flex-wrap:wrap}
.mag{display:inline-block}
.stage{position:relative;height:470px}
.stage-inner{position:absolute;inset:0;transform-origin:50% 40%}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.still{position:absolute;inset:58px 46px 74px;border-radius:92px 34px 92px 34px;
  background:linear-gradient(160deg,#FFF 0%,#B7BECC 15%,#F4F6FA 25%,#4F5868 36%,#CCD3DE 44%,#FFF 54%,#C0C6D2 64%,#EDE8FA 80%,#D8E7F3 90%,#FFF 100%);
  box-shadow:inset 0 2px 3px #FFF,0 30px 60px #252b3b1f}
.has-gl .still{display:none}

/* metal tool tiles */
.launch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.launch-tile,.launch-deck,.launch-rehearse,.launch-study{border-radius:var(--shape-lg);min-height:210px;box-shadow:0 1px 2px #1F243008,0 10px 30px #1F24300C}
.launch-exam{background:linear-gradient(150deg,#F4F1FE,#D8D0F5 40%,#EEEAFC 60%,#C9BFEF)}
.launch-deck{background:linear-gradient(150deg,#F2F8FE,#CCE1F4 40%,#EAF3FC 60%,#BBD6EE)}
.launch-rehearse{background:linear-gradient(150deg,#FFFBEE,#F3E2A8 40%,#FCF5DC 60%,#EBD48C)}
.launch-study{background:linear-gradient(150deg,#FFFFFF,#DCDFE7 40%,#F5F6F9 60%,#CBCFD9)}
.launch-tile canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block;pointer-events:none}
.has-gl .launch-tile[data-gl]{background:#EEF0F5}
.launch-tile p{color:#3F4350}
.tool-symbol{border-radius:var(--shape-md);background:linear-gradient(160deg,#FFFFFF,#E9EBF1 50%,#FFFFFF);border:1px solid #FFFFFFCC;box-shadow:inset 0 1px 0 #FFF,inset 0 -1px 0 #0000000D,0 2px 8px #1F24301A}

/* scroll story */
.story{padding:150px 0 40px}
.story-head{max-width:860px;margin-bottom:40px}
.eyebrow-line{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 22px}
.eyebrow-line::before{content:"";width:28px;height:2px;background:linear-gradient(90deg,#8D93A1,#FFFFFF,#B3A6E6)}
.story-head h2{font-size:clamp(42px,5.2vw,72px);line-height:1;max-width:16ch;margin:0}
.story-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:72px;align-items:start}
.story-visual{position:sticky;top:96px;height:min(640px,calc(100vh - 130px));min-height:420px}
.story-visual canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.story-still{position:absolute;inset:16% 18%;border-radius:var(--shape-lg);background:linear-gradient(150deg,#FFFFFF,#DCDFE7 40%,#F5F6F9 60%,#CBCFD9);border:1px solid #CDD1DB}
.has-gl .story-still{display:none}
.story-labels{position:absolute;left:4px;bottom:6px;height:28px;width:100%}
.slabel{position:absolute;left:0;bottom:0;display:flex;align-items:baseline;gap:12px;font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.02em;opacity:0;transform:translateY(10px);
  transition:opacity 260ms ease,transform 360ms var(--enter)}
.slabel b{font-weight:500;font-size:13px;letter-spacing:.08em;color:var(--muted)}
.slabel.on{opacity:1;transform:none}
.story-steps{position:relative;list-style:none;margin:0;padding:0 0 18vh 44px}
.rail{position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--line);border-radius:2px;overflow:hidden}
.rail i{display:block;height:100%;transform-origin:50% 0;transform:scaleY(0);background:linear-gradient(180deg,#8D93A1,#FFFFFF 18%,#B3A6E6 40%,#97BDE3 66%,#E0C273 90%)}
.step{min-height:72vh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity 320ms ease}
.step:nth-of-type(2){min-height:60vh}
.step.on{opacity:1}
.num{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.num i{width:14px;height:14px;border-radius:5px 2px 5px 2px;border:1px solid #A7ADB9;background:linear-gradient(135deg,#FFF 0%,#B6BAC4 30%,#F5F6FA 50%,#767C8A 72%,#D4D8E3 100%)}
.step:nth-of-type(3) .num i{background:linear-gradient(135deg,#FFF,#B3A6E6 40%,#F1EDFF 60%,#8F80D0)}
.step:nth-of-type(4) .num i{background:linear-gradient(135deg,#FFF,#97BDE3 40%,#EEF6FF 60%,#6E9BC9)}
.step:nth-of-type(5) .num i{background:linear-gradient(135deg,#FFF,#E0C273 40%,#FFF8DE 60%,#C4A24C)}
.step h3{font-size:clamp(26px,2.7vw,38px);line-height:1.16;margin:20px 0 18px;max-width:18ch;letter-spacing:-.025em}
.step p{color:var(--muted);max-width:42ch;font-size:17px;line-height:1.65;margin:0}
.closing{text-align:center;padding:40px 0 140px;display:flex;flex-direction:column;align-items:center;gap:28px}
.closing h2{font-size:clamp(44px,5.6vw,78px);line-height:1;max-width:14ch;margin:0}

/* word-by-word reveal */
.w{color:var(--ghost);transition:color 520ms var(--enter);transition-delay:calc(var(--i,0) * 42ms)}
.in .w{color:var(--c,var(--ink))}
.lede{--c:var(--muted)}
.scrub .w{transition:none}
.scrub .w.lit{color:var(--ink)}

/* entrances: each runs once */
.js .rise{opacity:0;transform:translateY(18px)}
.rise{transition:opacity 700ms var(--enter),transform 700ms var(--enter),box-shadow 300ms ease,border-color 220ms ease;transition-delay:calc(var(--n,0) * 45ms)}
.js .rise.shown{opacity:1;transform:none}
.launch-tile.shown{transition-delay:0s,0s,0s,0s}
@media (hover:hover) and (pointer:fine){.launch-tile.shown:hover{transform:translateY(-4px);box-shadow:0 2px 4px #1F24300F,0 22px 48px #1F24301A}}

/* intro overlay: first visit only */
.intro-running .mark{opacity:0;transform:scale(.9)}
.mark{transition:opacity 200ms ease,transform 380ms var(--enter)}
.intro{position:fixed;inset:0;z-index:2000;background:var(--bg);transition:background-color 420ms ease}
.intro canvas{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity 220ms ease}
.intro.clear{background-color:transparent;pointer-events:none}
.intro.done canvas{opacity:0}
.intro .skip{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);opacity:0;transition:opacity 300ms ease 500ms}
.intro .skip:active{transform:translateX(-50%) scale(.96)}
.intro.show-skip .skip{opacity:1}
.intro.clear .skip{opacity:0;transition-delay:0s}

@media (max-width:900px){
  .mf-hero{grid-template-columns:1fr;min-height:0;padding-top:28px}
  .stage{height:300px}
  .launch-grid{grid-template-columns:1fr}
  .story{padding:90px 0 20px}
  .story-grid{grid-template-columns:1fr;gap:0}
  .story-visual{display:none}
  .step,.step:nth-of-type(2){min-height:0;padding:36px 0;opacity:1}
}
@media (max-width:700px){.mf-hero h1{font-size:54px}.stage{height:240px}}
@media (prefers-reduced-motion:reduce){
  .w{transition-duration:160ms;transition-delay:0s}
  .js .rise{transform:none}
  .rise,.mark,.btn,.launch-tile{transition-property:opacity,background-color,border-color,color,box-shadow;transition-duration:160ms;transition-delay:0s}
  .btn::after{display:none}
  .launch-tile.shown:hover{transform:none}
  .scroll-line{display:none}
  .slabel{transform:none}
}

/* ---------- chrome form controls, every page ---------- */
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input[type=url],textarea,select,
.field input,.field textarea,.field select,.ws-field input:not([type=checkbox]):not([type=radio]),.ws-field select,.ws-field textarea,.forge select{
  border:1px solid #B9BECA;border-radius:10px 3px 10px 3px;color:var(--ink);font-family:var(--body);
  background:linear-gradient(180deg,#EEF0F4 0%,#FFFFFF 22%,#FFFFFF 100%);
  box-shadow:inset 0 1px 2px #1F24301A,0 1px 0 #FFFFFF;
  transition:border-color 160ms ease,box-shadow 200ms ease,background-color 160ms ease}
textarea,.field textarea{border-radius:16px 5px 16px 5px}
input:focus,textarea:focus,select:focus,.field input:focus,.field textarea:focus,.ws-field input:focus,.ws-field textarea:focus,.ws-field select:focus{
  outline:none;border-color:#8072B1;box-shadow:inset 0 1px 2px #1F24301A,0 0 0 4px #8072B126}
select,.field select,.ws-field select,.forge select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2324262C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center/18px 18px,
    linear-gradient(180deg,#FFFFFF 0%,#F1F2F6 46%,#E6E8EE 54%,#F7F8FA 100%);
  box-shadow:inset 0 1px 0 #FFFFFF,inset 0 -1px 0 #CDD1D9,0 1px 2px #1F24300D}
@media (hover:hover) and (pointer:fine){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):hover,textarea:hover,select:hover{border-color:#9FA5B3}
}
input[type=checkbox],input[type=radio]{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin:0;cursor:pointer;vertical-align:middle;
  border:1px solid #A9AEBB;border-radius:6px 2px 6px 2px;
  background:linear-gradient(180deg,#FFFFFF 0%,#EEF0F4 50%,#E2E5EB 51%,#F6F7FA 100%);
  box-shadow:inset 0 1px 0 #FFFFFF,0 1px 2px #1F243014;transition:background 160ms ease,border-color 160ms ease,transform 120ms ease}
input[type=radio]{border-radius:50%}
input[type=checkbox]:checked{border-color:#0B0C0F;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") no-repeat center/14px 14px,
    linear-gradient(180deg,#5A5F6B 0%,#2E3139 44%,#1B1D23 56%,#3A3D47 100%)}
input[type=radio]:checked{border-color:#0B0C0F;background:radial-gradient(circle,#FFFFFF 0 3.5px,transparent 4px),linear-gradient(180deg,#5A5F6B 0%,#2E3139 44%,#1B1D23 56%,#3A3D47 100%)}
input[type=checkbox]:active,input[type=radio]:active{transform:scale(.92)}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:3px solid #8072B1;outline-offset:3px}
input[type=file]::file-selector-button{font:inherit;font-weight:600;color:var(--ink);cursor:pointer;padding:8px 14px;margin-right:12px;
  border:1px solid #BFC4CF;border-radius:10px 3px 10px 3px;background:linear-gradient(180deg,#FFFFFF 0%,#F1F2F6 46%,#E3E6EC 54%,#F6F7FA 100%);box-shadow:inset 0 1px 0 #FFFFFF,0 1px 2px #1F24300F}
input[type=range]{accent-color:#2E3139}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;margin-top:-7px;border:1px solid #8D93A1;
  background:radial-gradient(circle at 35% 30%,#FFFFFF,#C9CDD6 55%,#8D93A1);box-shadow:0 1px 3px #1F243040;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(180deg,#D5D8E0,#F2F3F6)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;border:1px solid #8D93A1;background:radial-gradient(circle at 35% 30%,#FFFFFF,#C9CDD6 55%,#8D93A1)}

/* chrome choice cards and toggles */
.purpose-choice label,.source-choice label,.exam-option,.opt{border:1px solid #C3C7D1;border-radius:var(--shape-md);
  background:linear-gradient(170deg,#FFFFFF 0%,#F3F4F7 55%,#ECEEF2 100%);box-shadow:inset 0 1px 0 #FFFFFF,0 1px 2px #1F24300A;
  transition:border-color 160ms ease,box-shadow 200ms ease,transform 200ms var(--enter),background 200ms ease}
.purpose-choice label:has(:checked),.source-choice label:has(:checked),.exam-option:has(:checked){border-color:#8F80D0;outline:none;
  background:linear-gradient(160deg,#F6F3FF 0%,#DCD4F6 45%,#F1EDFF 62%,#CFC5F0 100%);box-shadow:inset 0 1px 0 #FFFFFF,inset 0 -1px 0 #B3A6E699,0 4px 14px #5F4FA51A}
.ws-checks label{padding:9px 14px 9px 10px;border:1px solid #C3C7D1;border-radius:999px;background:linear-gradient(180deg,#FFFFFF 0%,#F1F2F6 50%,#E8EAEF 51%,#F7F8FA 100%);
  box-shadow:inset 0 1px 0 #FFFFFF,0 1px 2px #1F24300D;transition:border-color 160ms ease,background 200ms ease,transform 120ms ease}
.ws-checks label:has(:checked){border-color:#8F80D0;background:linear-gradient(180deg,#F6F3FF 0%,#E2DBF8 50%,#D6CDF4 51%,#EEE9FD 100%)}
.ws-checks label:active{transform:scale(.97)}
.modes{background:linear-gradient(180deg,#E3E6EC,#EEF0F4);border:1px solid #CDD1DA;box-shadow:inset 0 1px 2px #1F243014}
.mode.on{background:linear-gradient(180deg,#FFFFFF 0%,#F1F2F6 46%,#E3E6EC 54%,#F6F7FA 100%);box-shadow:inset 0 1px 0 #FFFFFF,0 2px 6px #1F24301A;color:var(--ink)}
.mini-metal{border-radius:var(--shape-lg)}

/* ---------- guided creation forms ---------- */
.sr-select{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;border:0!important}
.flow-steps{list-style:none;display:flex;gap:8px;margin:20px 0 26px;padding:0;flex-wrap:wrap}
.flow-steps li{flex:1 1 140px}
.flow-steps button{width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid #CDD1DA;border-radius:var(--shape-sm);font:inherit;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;
  background:linear-gradient(180deg,#FFFFFF,#F2F3F6);transition:color 200ms ease,border-color 200ms ease,background 260ms ease}
.flow-steps i{flex:none;width:22px;height:22px;border-radius:7px 2px 7px 2px;display:grid;place-items:center;font-style:normal;font-size:12px;color:var(--muted);
  border:1px solid #B6BBC6;background:linear-gradient(135deg,#FFF 0%,#D7DAE2 45%,#F5F6FA 60%,#BEC3CE 100%);transition:background 260ms ease,color 200ms ease,transform 300ms var(--release)}
.flow-steps li.now button{color:var(--ink);border-color:#8F80D0}
.flow-steps li.done button{color:var(--ink)}
.flow-steps li.done i{color:#FFFFFF;border-color:#0B0C0F;background:linear-gradient(180deg,#5A5F6B 0%,#2E3139 44%,#1B1D23 56%,#3A3D47 100%);transform:scale(1.06)}
.flow-block{position:relative;padding:22px 0 6px;border-top:1px solid var(--line);scroll-margin-top:100px}
.flow-block:first-of-type{border-top:0;padding-top:0}
.flow-block>h3{display:flex;align-items:center;gap:10px;font-size:19px;margin:0 0 14px}
.flow-block>h3 small{font-family:var(--body);font-weight:500;font-size:13px;letter-spacing:0;color:var(--muted)}
.meter{display:flex;align-items:center;gap:14px;margin:10px 0 4px;font-size:13px;color:var(--muted)}
.meter b{color:var(--ink);font-variant-numeric:tabular-nums}
.meter-bar{flex:0 0 160px;height:6px;border-radius:6px;overflow:hidden;background:linear-gradient(180deg,#DADDE4,#EEF0F4);box-shadow:inset 0 1px 1px #1F24301A}
.meter-bar span{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);transition:transform 420ms var(--enter);
  background:linear-gradient(90deg,#8D93A1,#FFFFFF 30%,#B3A6E6 60%,#97BDE3)}
.dropzone{position:relative;display:flex;align-items:center;gap:16px;padding:18px 20px;border:1.5px dashed #A9AEBB;border-radius:var(--shape-md);cursor:pointer;
  background:linear-gradient(160deg,#FFFFFF,#F2F3F7 60%,#ECEEF3);transition:border-color 180ms ease,background 240ms ease,transform 240ms var(--enter)}
.dropzone .dz-icon{flex:none;width:44px;height:44px;border-radius:var(--shape-md);display:grid;place-items:center;border:1px solid #FFFFFFCC;
  background:linear-gradient(160deg,#FFFFFF,#E3E6EC 50%,#FFFFFF);box-shadow:inset 0 1px 0 #FFF,0 2px 8px #1F24301A;transition:transform 300ms var(--release)}
.dropzone .dz-icon svg{width:22px;height:22px}
.dropzone strong{display:block;font-weight:600}
.dropzone span{font-size:13px;color:var(--muted)}
.dropzone.over{border-color:#8F80D0;background:linear-gradient(160deg,#F6F3FF,#E2DBF8 60%,#EEE9FD);transform:scale(1.01)}
.dropzone.over .dz-icon{transform:translateY(-3px) rotate(-4deg)}
.dropzone:focus-within{border-color:#8072B1;box-shadow:0 0 0 4px #8072B126}
.file-chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;padding:0;list-style:none}
.file-chips li{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;font-size:13px;font-weight:600;border:1px solid #C3C7D1;border-radius:999px;
  background:linear-gradient(180deg,#FFFFFF,#EEF0F4);animation:chipIn 320ms var(--enter) both}
.file-chips small{font-weight:500;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:42px;padding:8px 14px;font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;
  border:1px solid #C3C7D1;border-radius:var(--shape-sm);background:linear-gradient(180deg,#FFFFFF 0%,#F1F2F6 46%,#E6E8EE 54%,#F7F8FA 100%);
  box-shadow:inset 0 1px 0 #FFFFFF,0 1px 2px #1F24300D;transition:transform 220ms var(--release),border-color 160ms ease,background 200ms ease,color 160ms ease}
.chip[aria-pressed=true]{color:#FFFFFF;border-color:#0B0C0F;text-shadow:0 1px 2px #000000B3;
  background:linear-gradient(180deg,#5A5F6B 0%,#2E3139 44%,#1B1D23 56%,#3A3D47 100%);box-shadow:inset 0 1px 0 #FFFFFF40,0 4px 10px #1F243026}
.chip:active{transform:scale(.95);transition-duration:0s}
.chip:disabled{opacity:.55;cursor:wait}
@media (hover:hover) and (pointer:fine){.chip:not([aria-pressed=true]):hover{border-color:#9FA5B3}.dropzone:hover{border-color:#8D93A1}.flow-steps button:hover{border-color:#9FA5B3}}
.flow-summary{margin-top:30px;padding:22px;border:1px solid #CDD1DB;border-radius:var(--shape-lg);
  background:linear-gradient(160deg,#FFFFFF 0%,#EEF0F5 45%,#FAFBFD 60%,#E4E7EE 100%);box-shadow:inset 0 1px 0 #FFFFFF,0 10px 30px #1F24300F}
.flow-summary h2{font-size:15px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 14px;color:var(--muted)}
.flow-summary dl{margin:0;display:grid;gap:10px}
.flow-summary div{display:flex;justify-content:space-between;gap:14px;font-size:14px;border-bottom:1px solid #DDE0E8;padding-bottom:9px}
.flow-summary div:last-child{border-bottom:0;padding-bottom:0}
.flow-summary dt{color:var(--muted)}
.flow-summary dd{margin:0;font-weight:600;text-align:right;overflow-wrap:anywhere}
.flow-summary dd.tick{animation:tick 380ms var(--enter)}
.flow-ready{margin-top:14px;font-size:13px;color:var(--muted)}
.flow-ready.ok{color:var(--good)}
form.working{position:relative}
form.working::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px;
  background:linear-gradient(90deg,transparent,#B3A6E6,#FFFFFF,#97BDE3,transparent);background-size:50% 100%;background-repeat:no-repeat;animation:sweep 1.4s linear infinite}
@keyframes chipIn{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
@keyframes tick{from{opacity:.2;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes sweep{from{background-position:-50% 0}to{background-position:150% 0}}
@media (max-width:1000px){.flow-summary{margin-top:20px}}
@media (max-width:700px){.flow-summary{display:none}.flow-steps li{flex-basis:30%}.flow-steps button{font-size:12px;padding:8px}.meter-bar{flex-basis:90px}}
@media (prefers-reduced-motion:reduce){
  .chip,.dropzone,.dropzone .dz-icon,.flow-steps i,.meter-bar span{transition-duration:120ms;transform:none!important}
  .file-chips li,.flow-summary dd.tick{animation:none}
  form.working::after{animation:none;background:linear-gradient(90deg,#B3A6E6,#97BDE3)}
}