/* TOP EDU PREP — unified design system. Themes: data-theme, Layouts: data-layout on */ :root{ --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif; --max:1200px; --bg:#F4F6FF;--surface:#fff;--ink:#0E1330;--muted:#4A5170;--line:#DCE1F5; --pri:#2340E0;--on-pri:#fff;--acc:#FFD23F;--on-acc:#1a1a1a;--soft:#E6EBFF; --r:18px;--rb:999px;--bd:1px solid var(--line);--sh:0 14px 34px -16px rgba(20,30,90,.35);--lift:-6px; } html[data-theme="forest"]{--bg:#F0F6F3;--ink:#0C241C;--muted:#4A6058;--line:#D2E3DA;--pri:#0F5C47;--acc:#FF6B57;--soft:#DDEEE6} html[data-theme="plum"]{--bg:#F6F2FA;--ink:#22112F;--muted:#5B4A6B;--line:#E3D8EE;--pri:#5B2A86;--acc:#FFB199;--soft:#EBDFF6} html[data-theme="navy"]{--bg:#F1F5FA;--ink:#08152F;--muted:#44526B;--line:#D5DEEC;--pri:#0B1F4B;--acc:#3DDC97;--soft:#E0E9F6} html[data-theme="amber"]{--bg:#F5F5F3;--ink:#171A20;--muted:#565B66;--line:#E2E2DD;--pri:#1F2937;--acc:#F59E0B;--soft:#ECECE6} html[data-layout="poster"]{--r:6px;--rb:4px;--bd:3px solid var(--ink);--sh:7px 7px 0 var(--ink);--lift:0} html[data-layout="glass"]{--r:30px;--rb:999px;--bd:1px solid rgba(255,255,255,.7);--sh:0 24px 50px -22px rgba(20,20,80,.45);--lift:-8px} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:90px} html{overflow-x:clip} body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.75;font-size:17px;word-break:keep-all;overflow-wrap:anywhere;overflow-x:hidden;-webkit-font-smoothing:antialiased} html[data-layout="glass"] body{background:radial-gradient(900px 500px at 8% -5%,color-mix(in srgb,var(--pri) 22%,transparent),transparent 70%),radial-gradient(800px 500px at 100% 20%,color-mix(in srgb,var(--acc) 30%,transparent),transparent 70%),var(--bg);background-attachment:fixed} img,svg{max-width:100%;display:block} a{color:var(--pri)} :focus-visible{outline:3px solid var(--acc);outline-offset:3px;border-radius:4px} .skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:999} .skip:focus{left:8px;top:8px} .wrap{max-width:var(--max);margin:0 auto;padding:0 22px} h1,h2,h3,h4{font-weight:800;line-height:1.28;letter-spacing:-.025em} h1{font-size:clamp(2.1rem,6.2vw,4.3rem);font-weight:900;letter-spacing:-.04em;line-height:1.15} h2{font-size:clamp(1.6rem,3.8vw,2.5rem);margin-bottom:.5em} h3{font-size:1.25rem;margin-bottom:.35em} p+p{margin-top:1em} .lead{font-size:clamp(1.02rem,1.9vw,1.22rem);color:var(--muted);max-width:38em} .kicker{display:inline-flex;gap:.5em;align-items:center;font-weight:800;font-size:.92rem;color:var(--pri);background:var(--soft);padding:6px 14px;border-radius:var(--rb);margin-bottom:18px} .progress{position:fixed;top:0;left:0;height:4px;width:0;background:var(--acc);z-index:400;transition:width .1s} /* utility bar + header */ .util{background:var(--pri);color:var(--on-pri);font-size:.86rem} .util .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:38px;flex-wrap:wrap} .util a{color:var(--on-pri);text-decoration:none;font-weight:600;margin-left:16px} .util a:hover{text-decoration:underline} .util span{opacity:.9} .hdr{position:sticky;top:0;z-index:300;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .2s} .hdr.stuck{box-shadow:0 8px 24px -14px rgba(0,0,0,.35)} .hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:70px;gap:16px} .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:900;letter-spacing:-.03em;line-height:1.1} .logo svg{width:38px;height:38px;flex:none} .logo b{display:block;font-size:1.1rem} .logo small{display:block;font-weight:600;font-size:.72rem;color:var(--muted);letter-spacing:0} .nav{display:flex;align-items:center;gap:2px;list-style:none} .nav>li{position:relative;display:flex;align-items:center} .nav>li>a{padding:24px 13px;text-decoration:none;font-weight:800;color:var(--ink);font-size:.98rem;position:relative} .nav>li>a::after{content:"";position:absolute;left:13px;right:13px;bottom:16px;height:3px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .25s} .nav>li:hover>a::after,.nav>li>a[aria-current]::after,.nav>li:focus-within>a::after{transform:scaleX(1)} .caret{display:none;background:none;border:0;font:inherit;cursor:pointer;color:var(--ink);padding:10px} .sub{position:absolute;top:100%;left:50%;transform:translate(-50%,8px);background:var(--surface);border:var(--bd);border-radius:var(--r);box-shadow:var(--sh);padding:14px;min-width:260px;display:grid;gap:2px;opacity:0;visibility:hidden;transition:.2s} .sub.two{grid-template-columns:1fr 1fr;min-width:480px} .has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translate(-50%,0)} .sub a{display:block;padding:10px 12px;border-radius:calc(var(--r)/2);text-decoration:none;color:var(--ink);font-weight:700;font-size:.95rem} .sub a small{display:block;font-weight:500;color:var(--muted);font-size:.8rem} .sub a:hover{background:var(--soft)} .hdr .go{background:var(--acc);color:var(--on-acc);text-decoration:none;font-weight:900;padding:11px 20px;border-radius:var(--rb);border:var(--bd);white-space:nowrap;font-size:.95rem;transition:transform .15s} .hdr .go:hover{transform:scale(1.05)} .burger{display:none;background:var(--pri);color:var(--on-pri);border:0;border-radius:var(--rb);padding:10px 18px;font:inherit;font-weight:800;cursor:pointer} @media(max-width:1020px){ .hdr{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)} .burger{display:block} .hdr .go{display:none} .nav{position:fixed;inset:0 0 0 auto;width:min(88vw,380px);background:var(--surface);flex-direction:column;align-items:stretch;padding:84px 18px 30px;transform:translateX(105%);transition:transform .32s cubic-bezier(.2,.8,.2,1);z-index:350;overflow-y:auto;box-shadow:-20px 0 50px rgba(0,0,0,.25)} .nav.open{transform:none} .nav>li{flex-wrap:wrap;border-bottom:1px solid var(--line)} .nav>li>a{flex:1;padding:16px 6px;font-size:1.1rem} .nav>li>a::after{display:none} .caret{display:block;font-size:1.1rem} .sub,.sub.two{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:0;min-width:0;width:100%;grid-template-columns:1fr;display:none;padding:0 0 12px;background:transparent} .has-sub.open .sub{display:grid} .has-sub:hover .sub{transform:none} .burger{position:relative;z-index:360} .scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:299;opacity:0;visibility:hidden;transition:.3s} .scrim.on{opacity:1;visibility:visible} } /* buttons */ .btn{display:inline-flex;align-items:center;gap:.5em;padding:15px 26px;font:inherit;font-weight:800;font-size:1rem;text-decoration:none;background:var(--acc);color:var(--on-acc);border:var(--bd);border-radius:var(--rb);box-shadow:var(--sh);cursor:pointer;transition:transform .18s,box-shadow .18s} .btn:hover{transform:translateY(-3px) scale(1.02)} html[data-layout="poster"] .btn:hover{transform:translate(4px,4px);box-shadow:3px 3px 0 var(--ink)} .btn.pri{background:var(--pri);color:var(--on-pri)} .btn.ghost{background:transparent;color:inherit;box-shadow:none;border:2px solid currentColor} .row{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px} /* hero */ .hero{position:relative;overflow:hidden;padding:64px 0 80px} .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;position:relative;z-index:1} .hero h1 .w{display:inline-block;opacity:0;transform:translateY(.6em) rotate(2deg);animation:wordin .8s cubic-bezier(.2,.8,.2,1) forwards} .hero h1 em{font-style:normal;color:var(--pri);background:linear-gradient(transparent 62%,var(--acc) 62% 92%,transparent 92%)} @keyframes wordin{to{opacity:1;transform:none}} .hero .lead{margin-top:22px;animation:fadeup .8s .5s both} .hero .row,.hero .chips{animation:fadeup .8s .7s both} @keyframes fadeup{from{opacity:0;transform:translateY(20px)}} .rot{display:inline-block;min-width:3.2em;text-align:left;color:var(--pri)} .rot.swap{animation:swap .5s} @keyframes swap{0%{opacity:0;transform:translateY(60%)}100%{opacity:1;transform:none}} .hero-art{position:relative} .ph{position:relative;border-radius:var(--r);overflow:hidden;border:var(--bd);box-shadow:var(--sh);background:var(--soft);aspect-ratio:5/4} .ph img{width:100%;height:100%;object-fit:cover} .hero-art .ph{transform:rotate(2deg);animation:fadeup .9s .3s both} .badge{position:absolute;background:var(--surface);color:var(--ink);border:var(--bd);border-radius:var(--r);box-shadow:var(--sh);padding:10px 16px;font-weight:800;font-size:.92rem;animation:floaty 5s ease-in-out infinite;display:flex;gap:8px;align-items:center} .badge i{width:10px;height:10px;border-radius:50%;background:var(--acc);display:block;box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 35%,transparent)} .badge.b1{left:-18px;top:14%}.badge.b2{right:-10px;top:46%;animation-delay:-1.6s}.badge.b3{left:8%;bottom:-16px;animation-delay:-3.2s} @keyframes floaty{50%{transform:translateY(-12px)}} .blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.45;pointer-events:none;animation:drift 14s ease-in-out infinite alternate} .blob.a{width:420px;height:420px;background:var(--pri);left:-140px;top:-120px} .blob.b{width:360px;height:360px;background:var(--acc);right:-100px;bottom:-140px;animation-delay:-6s} @keyframes drift{to{transform:translate(60px,40px) scale(1.15)}} .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px} .chips span{border:1px solid var(--line);background:var(--surface);border-radius:var(--rb);padding:6px 14px;font-weight:700;font-size:.88rem} html[data-layout="poster"] .hero-grid{grid-template-columns:1fr;text-align:center} html[data-layout="poster"] .hero .lead{margin-inline:auto} html[data-layout="poster"] .hero .row,html[data-layout="poster"] .hero .chips{justify-content:center} html[data-layout="poster"] .hero-art{max-width:760px;margin:20px auto 0} html[data-layout="poster"] h1{font-size:clamp(2.4rem,8vw,6rem)} html[data-layout="glass"] .hero{background:linear-gradient(135deg,var(--pri),color-mix(in srgb,var(--pri) 55%,#000));color:#fff;border-radius:0 0 48px 48px} html[data-layout="glass"] .hero .lead,html[data-layout="glass"] .rot,html[data-layout="glass"] .hero h1 em{color:#fff} html[data-layout="glass"] .hero .lead{opacity:.9} html[data-layout="glass"] .hero h1 em{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--acc) 80%,transparent) 62% 92%,transparent 92%)} html[data-layout="glass"] .kicker{background:rgba(255,255,255,.16);color:#fff} html[data-layout="glass"] .chips span{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff} html[data-layout="glass"] .hero .btn.ghost{color:#fff} @media(max-width:900px){.hero{padding:36px 0 56px}.hero-grid{grid-template-columns:1fr}.hero-art{order:-1;max-width:520px}.badge.b1{left:6px}.badge.b2{right:6px}} /* page header (inner) */ .phead{padding:44px 0 46px;border-bottom:var(--bd);background:linear-gradient(135deg,var(--soft),transparent 70%);position:relative;overflow:hidden} .phead h1{font-size:clamp(1.9rem,5vw,3.2rem)} .phead .lead{margin-top:14px} .phead::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:var(--acc);opacity:.35;animation:drift 12s ease-in-out infinite alternate} .crumb{font-size:.86rem;color:var(--muted);margin-bottom:14px} .crumb a{color:var(--muted);text-decoration:none}.crumb a:hover{text-decoration:underline} /* marquee */ .marq{background:var(--pri);color:var(--on-pri);overflow:hidden;white-space:nowrap} .marq div{display:inline-block;padding:13px 0;animation:mq 42s linear infinite;font-weight:800} .marq span{margin:0 22px}.marq span:nth-child(even){color:var(--acc)} @keyframes mq{to{transform:translateX(-50%)}} /* sections & grids */ section{padding:76px 0} section.alt{background:var(--surface)} section.tint{background:var(--soft)} section.dark{background:var(--pri);color:var(--on-pri)} section.dark .lead{color:inherit;opacity:.85} .head{max-width:44em;margin-bottom:38px} .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px} .grid.c4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} .card{background:var(--surface);border:var(--bd);border-radius:var(--r);box-shadow:var(--sh);padding:26px;text-decoration:none;color:var(--ink);display:block;position:relative;transition:transform .25s,box-shadow .25s;transform-style:preserve-3d} a.card:hover,.card.hov:hover{transform:translateY(var(--lift))} html[data-layout="poster"] a.card:hover{transform:translate(4px,4px);box-shadow:3px 3px 0 var(--ink)} html[data-layout="glass"] .card{background:rgba(255,255,255,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} .card p{color:var(--muted);font-size:.97rem} .card .num{font-weight:900;font-size:2.2rem;color:var(--pri);line-height:1;margin-bottom:10px;display:block} .tag{display:inline-block;background:var(--soft);color:var(--pri);font-weight:800;font-size:.78rem;padding:3px 11px;border-radius:var(--rb);margin-bottom:10px} .ico{width:52px;height:52px;border-radius:calc(var(--r)*.7);background:var(--acc);color:var(--on-acc);display:grid;place-items:center;font-weight:900;font-size:1.35rem;margin-bottom:16px} .more{font-weight:800;color:var(--pri);margin-top:12px;display:inline-block} .split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center} @media(max-width:860px){.split{grid-template-columns:1fr}section{padding:54px 0}} /* quick menu */ .quick{padding:0;margin-top:-34px;position:relative;z-index:5} .quick .grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px} .quick a{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-weight:800;font-size:.95rem;padding:20px 10px;background:var(--surface);color:var(--ink);text-decoration:none;border:var(--bd);border-radius:var(--r);box-shadow:var(--sh);transition:transform .2s} .quick a:hover{transform:translateY(-6px)} .quick a b{width:46px;height:46px;border-radius:50%;background:var(--soft);color:var(--pri);display:grid;place-items:center;font-size:1.2rem;transition:.2s} .quick a:hover b{background:var(--acc);color:var(--on-acc);transform:rotate(-8deg) scale(1.1)} .quick small{display:block;color:var(--muted);font-weight:500;font-size:.78rem} /* stats */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px} .stats div{background:var(--surface);color:var(--ink);border:var(--bd);border-radius:var(--r);padding:22px;text-align:center} .stats b{font-size:2.6rem;font-weight:900;color:var(--pri);display:block;line-height:1.1} .stats span{font-size:.9rem;color:var(--muted);font-weight:600} /* timeline */ .tl{position:relative;display:grid;gap:22px;padding-left:34px;max-width:860px} .tl::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:4px;background:var(--line);border-radius:2px} .tl::after{content:"";position:absolute;left:11px;top:6px;width:4px;height:var(--tlh,0%);background:var(--acc);border-radius:2px;transition:height .2s} .tl li{list-style:none;position:relative;background:var(--surface);border:var(--bd);border-radius:var(--r);padding:20px 22px;box-shadow:var(--sh)} .tl li::before{content:"";position:absolute;left:-31px;top:24px;width:18px;height:18px;border-radius:50%;background:var(--surface);border:4px solid var(--pri)} .tl li h3{margin-bottom:.15em} .tl li p{color:var(--muted);font-size:.96rem} /* roadmap grid */ .road{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .road div{background:var(--surface);border:var(--bd);border-radius:var(--r);padding:18px;color:var(--ink)} .road b{display:block;font-size:1.3rem;color:var(--pri)} .road small{color:var(--muted);display:block;margin-top:6px;font-size:.85rem;line-height:1.5} @media(max-width:760px){.road{grid-template-columns:1fr 1fr}} /* tabs */ .tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px} .tabs button{font:inherit;font-weight:800;padding:11px 20px;border-radius:var(--rb);border:var(--bd);background:var(--surface);color:var(--ink);cursor:pointer;transition:.2s} .tabs button[aria-selected="true"]{background:var(--pri);color:var(--on-pri)} .tabs button:hover:not([aria-selected="true"]){background:var(--soft)} .panel{display:none;background:var(--surface);border:var(--bd);border-radius:var(--r);box-shadow:var(--sh);padding:30px} .panel.on{display:block;animation:pop .35s} @keyframes pop{from{opacity:0;transform:translateY(10px)}} .check{list-style:none;margin-top:12px} .check li{padding-left:1.7em;position:relative;margin:9px 0} .check li::before{content:"✓";position:absolute;left:0;top:0;width:1.25em;height:1.25em;border-radius:50%;background:var(--acc);color:var(--on-acc);font-size:.8em;font-weight:900;display:grid;place-items:center;margin-top:.28em} /* table */ .tw{overflow-x:auto;border:var(--bd);border-radius:var(--r);background:var(--surface);box-shadow:var(--sh);margin:22px 0} table{border-collapse:collapse;width:100%;min-width:560px} th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:.95rem;vertical-align:top} th{background:var(--pri);color:var(--on-pri);font-weight:800} tr:last-child td{border-bottom:0} td:first-child{font-weight:800} /* campus */ .cmp .ph{aspect-ratio:16/10;margin-bottom:16px;box-shadow:none} .cmp .st{display:inline-flex;gap:6px;font-weight:800;color:var(--pri);background:var(--soft);border-radius:var(--rb);padding:4px 12px;font-size:.86rem;margin-bottom:8px} /* blog */ .filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px} .filters button{font:inherit;font-weight:800;font-size:.9rem;padding:8px 16px;border-radius:var(--rb);border:var(--bd);background:var(--surface);color:var(--ink);cursor:pointer} .filters button[aria-pressed="true"]{background:var(--pri);color:var(--on-pri)} .post-card h3{font-size:1.15rem;line-height:1.4} .post-card .meta{font-size:.8rem;color:var(--muted);margin-top:14px;font-weight:600} .post-card[hidden]{display:none} .article{max-width:780px;margin:0 auto} .article h2{margin-top:2.1em;font-size:clamp(1.4rem,3vw,1.8rem)} .article h3{margin-top:1.6em} .article p{color:color-mix(in srgb,var(--ink) 88%,transparent)} .article ul{margin:14px 0 14px 1.3em}.article li{margin:6px 0} .article .call{background:var(--soft);border-left:6px solid var(--acc);border-radius:0 var(--r) var(--r) 0;padding:18px 22px;margin:22px 0;font-weight:600} .article .sum{background:var(--surface);border:var(--bd);border-radius:var(--r);padding:22px 24px;margin:0 0 28px;box-shadow:var(--sh)} .article .sum h2{margin:0 0 .4em;font-size:1.1rem} .toc{background:var(--surface);border:var(--bd);border-radius:var(--r);padding:18px 22px;margin:26px 0} .toc b{display:block;margin-bottom:6px} .toc ol{margin-left:1.2em}.toc a{text-decoration:none;font-weight:600} .byline{font-size:.88rem;color:var(--muted);margin-top:16px;display:flex;flex-wrap:wrap;gap:6px 16px} .related{margin-top:60px} .note{font-size:.86rem;color:var(--muted)} /* faq */ details{background:var(--surface);border:var(--bd);border-radius:var(--r);margin-bottom:12px;overflow:hidden;color:var(--ink)} summary{padding:18px 22px;font-weight:800;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center} summary::-webkit-details-marker{display:none} summary::after{content:"+";font-size:1.5rem;line-height:1;transition:transform .25s;color:var(--pri)} details[open] summary::after{transform:rotate(45deg)} details[open] summary{background:var(--soft)} details p{padding:16px 22px 20px;color:var(--muted)} /* cta */ .cta{text-align:center} .cta .row{justify-content:center} .cta h2{max-width:20em;margin-inline:auto} .cta .lead{margin-inline:auto} .quote{font-size:clamp(1.2rem,2.6vw,1.7rem);font-weight:800;letter-spacing:-.02em;line-height:1.5;max-width:30em} .quote small{display:block;font-size:.9rem;font-weight:600;opacity:.8;margin-top:14px} /* footer */ footer{background:var(--ink);color:#cfd3e4;padding:56px 0 30px;margin-top:0} html[data-theme] footer{background:color-mix(in srgb,var(--ink) 94%,var(--pri))} footer .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:30px} footer h4{color:#fff;font-size:1rem;margin-bottom:10px} footer a{color:#cfd3e4;text-decoration:none;display:block;padding:3px 0;font-size:.95rem} footer a:hover{color:var(--acc)} footer small{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14);padding-top:18px;margin-top:10px;color:#8e93ab;line-height:1.7} @media(max-width:860px){footer .wrap{grid-template-columns:1fr 1fr}} @media(max-width:520px){footer .wrap{grid-template-columns:1fr}} /* floating: mobile bottom bar, top button, design panel */ .mbar{display:none} @media(max-width:700px){ .mbar{display:grid;grid-template-columns:1fr 1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:250;background:var(--surface);border-top:var(--bd);padding-bottom:env(safe-area-inset-bottom)} .mbar a{padding:12px 4px;text-align:center;text-decoration:none;font-weight:800;font-size:.86rem;color:var(--ink)} .mbar a:first-child{background:var(--acc);color:var(--on-acc)} body{padding-bottom:56px} } .fab{position:fixed;right:16px;bottom:74px;z-index:260;display:flex;flex-direction:column;gap:10px;align-items:flex-end} @media(min-width:701px){.fab{bottom:22px}} .fab button{border:0;cursor:pointer;font:inherit;font-weight:800;border-radius:var(--rb);padding:12px 18px;background:var(--ink);color:#fff;box-shadow:0 10px 26px -8px rgba(0,0,0,.5);transition:transform .15s} .fab button:hover{transform:scale(1.06)} .fab .top{padding:12px 16px;opacity:0;pointer-events:none;transition:.25s;background:var(--acc);color:var(--on-acc)} .fab .top.on{opacity:1;pointer-events:auto} .dpanel{position:fixed;right:16px;bottom:130px;z-index:270;width:min(92vw,330px);background:var(--surface);border:var(--bd);border-radius:var(--r);box-shadow:0 24px 60px -16px rgba(0,0,0,.5);padding:20px;display:none;color:var(--ink)} @media(min-width:701px){.dpanel{bottom:80px}} .dpanel.on{display:block;animation:pop .25s} .dpanel h4{font-size:.95rem;margin:12px 0 8px}.dpanel h4:first-child{margin-top:0} .opts{display:grid;gap:8px} .opts button{font:inherit;font-weight:700;text-align:left;padding:10px 14px;border-radius:12px;border:2px solid var(--line);background:var(--bg);cursor:pointer;color:var(--ink)} .opts button[aria-pressed="true"]{border-color:var(--pri);background:var(--soft)} .opts button small{display:block;font-weight:500;color:var(--muted);font-size:.78rem} .sw{display:flex;gap:10px;flex-wrap:wrap} .sw button{width:44px;height:44px;border-radius:50%;border:3px solid var(--surface);box-shadow:0 0 0 2px var(--line);cursor:pointer;position:relative} .sw button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--ink)} .sw [data-v=cobalt]{background:linear-gradient(135deg,#2340E0 50%,#FFD23F 50%)} .sw [data-v=forest]{background:linear-gradient(135deg,#0F5C47 50%,#FF6B57 50%)} .sw [data-v=plum]{background:linear-gradient(135deg,#5B2A86 50%,#FFB199 50%)} .sw [data-v=navy]{background:linear-gradient(135deg,#0B1F4B 50%,#3DDC97 50%)} .sw [data-v=amber]{background:linear-gradient(135deg,#1F2937 50%,#F59E0B 50%)} /* scroll reveal (only when JS is on) */ .js .rv{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)} .js .rv.in{opacity:1;transform:none} .js .rv-l{opacity:0;transform:translateX(-40px);transition:.8s cubic-bezier(.2,.8,.2,1)} .js .rv-l.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.js .rv,.js .rv-l{opacity:1;transform:none}.hero h1 .w{opacity:1;transform:none}} /* index editing */ .edit-on [data-edit]{outline:2px dashed var(--acc);outline-offset:4px;cursor:text;min-height:1em} .edit-on [data-edit]:focus{outline-color:var(--pri);background:color-mix(in srgb,var(--acc) 12%,transparent)} .imgbtn{position:absolute;inset:auto 10px 10px auto;background:var(--ink);color:#fff;border:0;border-radius:var(--rb);padding:9px 16px;font:inherit;font-weight:800;font-size:.85rem;cursor:pointer;z-index:5;box-shadow:0 8px 20px -6px rgba(0,0,0,.5)} .etool{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:500;background:var(--ink);color:#fff;border-radius:var(--r);padding:10px 12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;box-shadow:0 20px 50px -10px rgba(0,0,0,.6);max-width:96vw;justify-content:center} .etool button{font:inherit;font-weight:800;font-size:.86rem;border:0;border-radius:var(--rb);padding:9px 14px;cursor:pointer;background:#2b3050;color:#fff} .etool button.pri{background:var(--acc);color:var(--on-acc)} .etool span{font-size:.8rem;opacity:.8;padding:0 6px} .toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 20px;border-radius:var(--rb);z-index:600;font-weight:700;animation:fadeup .3s} .rotline{font-weight:800;font-size:1.2rem;margin-top:20px;animation:fadeup .8s .6s both} .rotline .rot{border-bottom:4px solid var(--acc)} .cmp{padding:18px} .cmp h3{margin-top:4px} .crumb{font-size:.86rem} [hidden]{display:none!important} .grid.c3{grid-template-columns:repeat(3,1fr)} @media(max-width:900px){.grid.c3{grid-template-columns:1fr 1fr}} @media(max-width:600px){.grid.c3{grid-template-columns:1fr}} @media(max-width:700px){ .util span:first-child{display:none} .util .wrap{justify-content:center;min-height:34px} .util a{margin:0 10px} .fab{right:10px;bottom:66px;gap:8px} .fab button{padding:9px 13px;font-size:.8rem} .fab button[aria-pressed]{display:none} .etool{top:auto;bottom:70px} }