@import url('https://fonts.googleapis.com/css2?family=Chivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans+TC:wght@400;500;600;700&display=swap');
:root{--ink:#10243e;--ink-2:#243b55;--paper:#f5f7f8;--white:#fff;--line:#d7dee5;--blue:#176bce;--blue-soft:#e8f2ff;--amber:#e7a52b;--muted:#657487;--shadow:0 18px 55px rgba(16,36,62,.1);--radius:18px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans TC",sans-serif;line-height:1.65}button,input,textarea,select{font:inherit}button{color:inherit}[v-cloak]{display:none}
body.dark{--ink:#eef5ff;--ink-2:#c7d5e5;--paper:#0c1929;--white:#13253a;--line:#2b4056;--blue:#65aaff;--blue-soft:#173452;--muted:#9db0c4;--shadow:0 18px 55px rgba(0,0,0,.22)}
a{color:inherit}.site-header{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,72px);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(18px);position:sticky;top:0;z-index:20}
.brand{text-decoration:none;display:flex;align-items:center;gap:11px;font:600 18px Chivo}.brand-mark{display:inline-grid;place-items:center;width:37px;height:37px;background:var(--ink);color:var(--paper);border-radius:10px;font:600 12px "IBM Plex Mono"}
.site-header nav{display:flex;align-items:center;gap:8px}.site-header nav button,.theme-button,.menu-button{background:none;border:0;padding:9px 12px;cursor:pointer;border-radius:9px}.site-header nav button:hover,.menu-button:hover{background:var(--blue-soft)}.theme-button{font-size:19px}.menu-button,.menu-backdrop{display:none}
.home{overflow:hidden}.hero{min-height:670px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(330px,.65fr);align-items:center;gap:6vw;padding:75px clamp(22px,7vw,110px);max-width:1540px;margin:auto}.eyebrow{font:600 11px "IBM Plex Mono";letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin:0 0 15px}.hero h1,.page-title h1,.workspace h1{font:600 clamp(44px,6vw,82px)/1.08 Chivo,"Noto Sans TC";letter-spacing:-.055em;margin:0}.hero h1 em{color:var(--blue);font-style:normal}.hero-lead{font-size:18px;color:var(--ink-2);max-width:680px;margin:28px 0}
.command-bar{height:66px;position:relative;display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;padding:0 16px;background:var(--white);box-shadow:var(--shadow);transition:.2s}.command-bar.active{border-color:var(--blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 16%,transparent),var(--shadow)}.command-bar input{border:0;outline:0;background:transparent;flex:1;color:var(--ink);font-size:16px}.command-bar kbd,.guide kbd{font:500 11px "IBM Plex Mono";border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:3px 7px;background:var(--paper)}
.command-results{position:absolute;top:73px;left:0;right:0;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:7px;z-index:8;box-shadow:var(--shadow)}.command-results button{width:100%;display:grid;grid-template-columns:36px 1fr auto;align-items:center;text-align:left;border:0;background:none;padding:10px;border-radius:9px;cursor:pointer}.command-results button.selected,.command-results button:hover{background:var(--blue-soft)}.command-results b,.command-results small{display:block}.command-results small{color:var(--muted)}
.privacy-note{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}.privacy-note span{width:7px;height:7px;background:#2aa46f;border-radius:50%}.calibration{height:470px;position:relative;display:grid;place-items:center;background:var(--ink);border-radius:34px 10px 34px 10px;color:var(--paper);overflow:hidden;transform:rotate(1.5deg)}.calibration:before{content:"";position:absolute;inset:24px;border:1px solid rgba(255,255,255,.15);border-radius:24px 5px}.dial{width:255px;height:255px;border-radius:50%;border:1px solid rgba(255,255,255,.4);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 0 18px rgba(255,255,255,.03),0 0 0 42px rgba(255,255,255,.02);position:relative}.dial:after{content:"";position:absolute;width:2px;height:102px;background:var(--amber);top:23px;transform-origin:bottom;transform:rotate(38deg)}.dial span,.dial small,.calibration>p{font:500 10px "IBM Plex Mono";letter-spacing:.18em}.dial strong{font:600 72px Chivo;line-height:1}.calibration>p{position:absolute;bottom:38px}.tick-strip{position:absolute;top:35px;left:45px;right:45px;border-top:6px dotted rgba(255,255,255,.2)}
.quick-section{padding:90px clamp(22px,7vw,110px);max-width:1540px;margin:auto}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:30px}.section-heading h2,.knowledge-strip h2,.learn h2{font:600 clamp(30px,4vw,48px) Chivo,"Noto Sans TC";letter-spacing:-.035em;margin:0}.text-button,.back{background:none;border:0;color:var(--blue);cursor:pointer;font-weight:600}.tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.tool-card{text-align:left;min-height:225px;padding:22px;border:1px solid var(--line);background:var(--white);border-radius:var(--radius);cursor:pointer;position:relative;transition:transform .2s,border-color .2s,box-shadow .2s}.tool-card:hover{transform:translateY(-4px);border-color:var(--blue);box-shadow:var(--shadow)}.tool-icon{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--blue-soft);color:var(--blue);font:600 15px "IBM Plex Mono"}.tool-icon.big{width:58px;height:58px;font-size:18px}.local-tag{position:absolute;right:18px;top:18px;font:500 10px "IBM Plex Mono";color:var(--muted)}.tool-card h3{font:600 18px Chivo,"Noto Sans TC";margin:24px 0 8px}.tool-card p{font-size:13px;color:var(--muted);margin:0}.open-label{position:absolute;bottom:18px;font-size:12px;color:var(--blue);font-weight:600}.open-label b{transition:.2s}.tool-card:hover .open-label b{display:inline-block;transform:translate(3px,-3px)}
.knowledge-strip{margin:25px clamp(22px,7vw,110px) 100px;padding:54px;display:grid;grid-template-columns:1.2fr 1fr auto;align-items:center;gap:50px;background:var(--blue);color:white;border-radius:8px 35px 8px 35px}.knowledge-strip .eyebrow{color:#b9dcff}.knowledge-strip p{margin:0}.knowledge-strip button{border:1px solid rgba(255,255,255,.5);border-radius:10px;background:none;color:white;padding:12px 18px;cursor:pointer}
.page-shell{max-width:1440px;margin:auto;padding:45px clamp(22px,5vw,72px) 100px}.back{padding:8px 0;margin-bottom:48px}.page-title{margin-bottom:60px}.page-title h1,.workspace h1{font-size:clamp(40px,5vw,68px)}.library-layout{display:grid;grid-template-columns:190px 1fr;gap:45px}.library-layout>aside{display:flex;flex-direction:column;gap:4px}.library-layout>aside button{text-align:left;border:0;background:none;padding:10px 12px;border-radius:8px;cursor:pointer}.library-layout>aside button.active{color:var(--blue);background:var(--blue-soft);font-weight:600}.search-box{display:block;font-size:12px;color:var(--muted);margin-bottom:26px}.search-box input{display:block;width:100%;max-width:520px;margin-top:7px;border:1px solid var(--line);background:var(--white);color:var(--ink);border-radius:10px;padding:12px}
.workspace-head>div{display:flex;gap:20px;align-items:flex-start;margin-bottom:38px}.workspace-head p{color:var(--muted);max-width:720px}.workbench{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);background:var(--white);border-radius:var(--radius);overflow:hidden;min-height:430px}.panel{padding:24px}.panel+.panel{border-left:1px solid var(--line)}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.panel-head h2{margin:0;font:600 14px "Noto Sans TC"}.actions{display:flex;gap:7px;flex-wrap:wrap}.action{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:8px;padding:7px 11px;cursor:pointer;font-size:12px}.action.primary{background:var(--blue);border-color:var(--blue);color:white}.action:hover{border-color:var(--blue)}.action:disabled{cursor:not-allowed;opacity:.5}textarea,.code-output,.field{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);padding:14px;font:13px/1.6 "IBM Plex Mono";outline:0}textarea{min-height:320px;resize:vertical}.field{min-height:auto}.code-output{min-height:320px;white-space:pre-wrap;overflow:auto;margin:0}.error{color:#c94646;font-size:12px}.controls{display:grid;gap:14px}.controls label{font-size:12px;color:var(--muted)}.controls input,.controls select{display:block;margin-top:6px}.result-list{display:grid;gap:10px}.result-row{padding:13px;border-bottom:1px solid var(--line)}.result-row span{display:block;color:var(--muted);font-size:11px}.result-row code{font-family:"IBM Plex Mono";word-break:break-all}.range-line{display:flex;align-items:center;gap:12px}.range-line input{flex:1}.checkboxes{display:flex;flex-wrap:wrap;gap:16px}.checkboxes label{color:var(--ink)}#qr-output{min-height:260px;display:grid;place-items:center;background:white;border-radius:10px;padding:18px}#qr-output img,#qr-output canvas{max-width:100%}.loading-indicator{color:var(--muted)}.rdap-summary{display:grid;gap:10px}.rdap-summary>div{padding:12px;border:1px solid var(--line);border-radius:9px;background:var(--paper)}.rdap-summary span{display:block;color:var(--muted);font-size:11px}.rdap-summary strong{font:500 12px/1.6 "IBM Plex Mono";overflow-wrap:anywhere}.raw-result{margin-top:16px}.raw-result summary{cursor:pointer;font-weight:600}.raw-result .code-output{margin-top:10px}
.learn{margin-top:42px;border-top:1px solid var(--line);padding-top:42px;display:grid;grid-template-columns:180px minmax(0,760px);gap:35px}.learn-label{font:600 11px "IBM Plex Mono";letter-spacing:.15em;color:var(--blue)}.learn h3{margin-top:28px}.learn p,.learn li{color:var(--ink-2)}.article-layout{display:grid;grid-template-columns:minmax(0,760px) 280px;gap:80px}.article-layout article h2{font:600 26px Chivo,"Noto Sans TC";margin:40px 0 8px}.article-layout aside{background:var(--white);border:1px solid var(--line);padding:25px;border-radius:var(--radius);height:max-content}
.flame-head{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:12px;color:var(--muted)}.flame-chart{display:flex;flex-direction:column-reverse;gap:3px;padding:12px;background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden}.flame-level{display:flex;gap:3px;min-height:34px}.flame-frame{min-width:18px;border:0;border-radius:4px;padding:4px 7px;color:#1a1720;display:flex;align-items:center;justify-content:space-between;gap:8px;overflow:hidden;cursor:pointer;font:500 10px "IBM Plex Mono"}.flame-frame span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.flame-frame small{opacity:.7}.flame-frame:hover{filter:saturate(1.3) brightness(1.05);outline:2px solid var(--ink)}
.prose-page{max-width:820px;margin:0 auto}.prose-page>h1{font:600 clamp(42px,6vw,72px)/1.08 Chivo,"Noto Sans TC";letter-spacing:-.05em;margin:0 0 30px}.prose-page h2{font:600 26px Chivo,"Noto Sans TC";margin:48px 0 10px}.prose-page p{color:var(--ink-2)}.prose-page .lead{font-size:20px;line-height:1.8}.updated{font:12px "IBM Plex Mono";color:var(--muted)!important}.contact-card{display:grid;gap:18px;margin-top:36px;padding:28px;border:1px solid var(--line);background:var(--white);border-radius:var(--radius)}.contact-card label{font-weight:600}.contact-card textarea{display:block;margin-top:7px;min-height:180px}
.privacy-notice{position:fixed;right:22px;bottom:22px;z-index:40;width:min(440px,calc(100vw - 44px));padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--white);box-shadow:var(--shadow)}.privacy-notice p{margin:0 0 12px;font-size:13px;color:var(--ink-2)}.privacy-notice div{display:flex;justify-content:flex-end;gap:8px}
footer{border-top:1px solid var(--line);padding:36px clamp(22px,5vw,72px);display:flex;align-items:center;gap:18px;color:var(--muted)}footer>div{display:flex;align-items:center;gap:10px;color:var(--ink)}footer p{margin-right:auto}footer nav{display:flex;gap:20px;font-size:13px}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:10px 17px;border-radius:10px;z-index:50;font-size:13px}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid color-mix(in srgb,var(--blue) 40%,transparent);outline-offset:2px}
@media(max-width:1000px){.hero{grid-template-columns:1fr;min-height:auto}.calibration{height:300px}.dial{transform:scale(.75)}.tool-grid{grid-template-columns:repeat(2,1fr)}.knowledge-strip{grid-template-columns:1fr}.library-layout{grid-template-columns:1fr}.library-layout>aside{flex-direction:row;overflow:auto}.workbench{grid-template-columns:1fr}.panel+.panel{border-left:0;border-top:1px solid var(--line)}}
@media(max-width:620px){.menu-button{display:block;font-size:21px;line-height:1}.site-header nav{display:none;position:absolute;z-index:22;top:62px;right:14px;width:min(280px,calc(100vw - 28px));align-items:stretch;flex-direction:column;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--white);box-shadow:var(--shadow)}.site-header nav.open{display:flex}.site-header nav button{display:block!important;text-align:left;width:100%;padding:12px}.menu-backdrop{display:block;position:fixed;z-index:19;inset:72px 0 0;width:100%;border:0;background:rgba(4,15,27,.35)}.hero{padding-top:52px}.hero h1{font-size:43px}.calibration{display:none}.tool-grid{grid-template-columns:1fr}.section-heading{align-items:start;gap:15px}.knowledge-strip{padding:32px;margin-bottom:55px}.learn{grid-template-columns:1fr}.article-layout{grid-template-columns:1fr}.workspace-head>div{flex-direction:column}footer{align-items:flex-start;flex-wrap:wrap}footer p{width:100%;order:3}footer nav{flex-wrap:wrap}.page-shell{padding-top:28px}.back{margin-bottom:30px}.prose-page .lead{font-size:17px}.flame-frame{font-size:9px;padding:3px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* DEA identity and educational content */
.brand>span:last-child{display:grid;line-height:1.1}.brand small{margin-top:4px;color:var(--muted);font:500 9px "IBM Plex Mono";letter-spacing:.04em}.brand-mark{width:42px;color:#d8b785;font-size:11px}
.dea-visual{position:relative;overflow:hidden;border:1px solid #29343d;border-radius:24px;background:#101b23;box-shadow:var(--shadow)}.dea-visual img{display:block;width:100%;aspect-ratio:1;object-fit:cover}.dea-visual p{position:absolute;left:22px;right:22px;bottom:18px;display:flex;justify-content:space-between;align-items:end;margin:0;color:#d8b785;font:500 10px "IBM Plex Mono";letter-spacing:.08em}.dea-visual strong{font-size:16px}
.section-note{margin:7px 0 0;color:var(--muted);font-size:13px}.empty-favorites{min-height:225px;border:1px dashed var(--line);border-radius:var(--radius);display:grid;place-content:center;justify-items:center;padding:24px}
.workspace-head>div>div{flex:1}.pin-action{white-space:nowrap;margin-left:auto}.learn{grid-template-columns:180px minmax(0,820px)}.lesson-section{padding:4px 0 20px;border-bottom:1px solid var(--line)}.lesson-section h3{font:600 21px Chivo,"Noto Sans TC"}.lesson-code{overflow:auto;padding:15px;border-radius:10px;background:var(--white);border:1px solid var(--line);font:12px/1.65 "IBM Plex Mono";white-space:pre-wrap}
@media(max-width:1000px){.dea-visual{max-width:620px}}
@media(max-width:620px){.site-header nav button.language-button{display:block}.brand b{display:none}.brand small{font-size:8px}.site-header{padding-inline:14px}.dea-visual p{display:none}}
.top-button{position:fixed;right:24px;bottom:24px;z-index:35;border:1px solid var(--line);border-radius:999px;background:var(--ink);color:var(--paper);box-shadow:var(--shadow);padding:10px 15px;cursor:pointer;font:600 12px "IBM Plex Mono"}.privacy-notice~.top-button{bottom:150px}.history-section{margin:28px 0 4px;padding:20px 22px;background:var(--blue-soft);border:0;border-left:3px solid var(--blue);border-radius:0 10px 10px 0}.history-section h3{margin-top:0}.flame-frame{white-space:nowrap;min-height:36px}.flame-frame span{min-width:0}.flame-chart{max-width:100%}
@media(max-width:620px){.top-button{right:14px;bottom:14px}.top-button span{display:none}.privacy-notice~.top-button{bottom:145px}}
.cidr-result{display:grid;gap:20px}.cidr-summary{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}.cidr-summary>div{display:grid;gap:4px;padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}.cidr-summary span,.cidr-summary small{color:var(--muted);font-size:11px}.cidr-summary strong{font:600 18px "IBM Plex Mono";overflow-wrap:anywhere}.cidr-range{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;font:10px "IBM Plex Mono";color:var(--muted)}.cidr-range i{position:relative;height:8px;border-radius:10px;background:linear-gradient(90deg,var(--blue-soft),var(--blue))}.cidr-range b{position:absolute;top:50%;width:14px;height:14px;border:3px solid var(--white);border-radius:50%;background:var(--amber);transform:translate(-50%,-50%);box-shadow:0 0 0 1px var(--ink)}.cidr-current{margin:0;padding:12px;border-left:3px solid var(--blue);background:var(--blue-soft);font-size:12px}.cidr-binary{padding:14px;border:1px solid var(--line);border-radius:10px}.cidr-binary summary{cursor:pointer;font-weight:600}.cidr-binary code{display:block;margin-top:12px;overflow:auto;white-space:nowrap;font:11px/1.7 "IBM Plex Mono"}
@media(max-width:620px){.cidr-summary{grid-template-columns:1fr}.cidr-range{grid-template-columns:1fr}.cidr-range i{order:3}.cidr-range span:last-child{text-align:right}}