:root{--green:#007d73;--green2:#009b8d;--deep:#073f3a;--dark:#17242d;--text:#23313a;--muted:#64757e;--line:#dce5e6;--surface:#f5f8f7;--mint:#e7f4f1;--warm:#f7f2e9;--yellow:#d89a14;color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--text);font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;background:white;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button{cursor:pointer;color:inherit}
button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid #58bdb4;outline-offset:2px}
main{min-height:70vh}
.app-header{height:72px;padding:0 4.5vw;display:flex;align-items:center;border-bottom:1px solid #d9e4e2;background:#fffffff2;backdrop-filter:blur(14px);position:sticky;top:0;z-index:40}
.brand{border:0;background:none;display:flex;align-items:center;gap:10px;min-width:190px;text-align:left;text-decoration:none;color:inherit}
.brand>span:last-child{display:flex;flex-direction:column}
.brand b{font-size:14px;letter-spacing:.12em}
.brand small{font-size:14px;letter-spacing:.2em;color:var(--green);margin-top:1px}
.header-brand-icon{width:40px;height:40px;flex:0 0 40px;border-radius:50%;background:var(--green);display:grid;place-items:center}
.header-brand-icon img{display:block;width:32px;height:32px;object-fit:contain}
.logo{width:34px;height:34px;border-radius:50%;background:var(--green);display:flex;justify-content:center;align-items:end;padding:8px;gap:2px}
.logo i{display:block;width:5px;background:white;border-radius:3px 3px 1px 1px;transform:rotate(6deg)}
.logo i:nth-child(1){height:10px}
.logo i:nth-child(2){height:18px}
.logo i:nth-child(3){height:14px}
.app-header nav{height:100%;display:flex;align-items:center;margin:auto;gap:25px}
.app-header nav button,.app-header nav a{height:100%;border:0;background:none;font-size:14px;color:#5d6d75;position:relative;padding:0 2px;text-decoration:none;display:flex;align-items:center}
.app-header nav button.active,.app-header nav a.active{color:var(--green);font-weight:800}
.app-header nav button.active:after,.app-header nav a.active:after{content:"";position:absolute;height:3px;background:var(--green);left:0;right:0;bottom:0}
.header-tools{min-width:190px;display:flex;justify-content:flex-end;align-items:center;gap:10px}
.search-symbol{display:inline-block;width:14px;height:14px;border:1.8px solid currentColor;border-radius:50%;position:relative;color:var(--green);flex:none}
.search-symbol:after{content:"";position:absolute;width:6px;height:1.8px;background:currentColor;right:-5px;bottom:-2px;transform:rotate(45deg)}
.help{width:34px;height:34px;border:1px solid #dbe4e5;border-radius:50%;background:white;color:#708087}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--deep);color:white;display:grid;place-items:center;font-size:14px;font-weight:800}
.kicker{font-size:14px;font-weight:800;letter-spacing:.2em;color:var(--green);text-transform:uppercase}
.home-hero{min-height:590px;display:grid;grid-template-columns:58% 42%;background:linear-gradient(125deg,#f9fbfa 0,#f3f8f6 60%,#e5f2ee 100%);overflow:hidden}
.hero-content{padding:85px 4vw 85px 9vw}
.hero-content .kicker span{display:inline-block;width:26px;height:1px;background:var(--green);vertical-align:middle;margin-right:10px}
.hero-content h1{font-size:52px;line-height:1.25;letter-spacing:-.045em;margin:18px 0}
.hero-content h1 em{font-style:normal;color:var(--green)}
.hero-content>p:not(.kicker){font-size:15px;color:#5b6c75;line-height:1.8}
.hero-search{height:62px;width:min(640px,100%);background:white;border:1px solid #c7d9d5;box-shadow:0 16px 35px #00494217;border-radius:7px;display:flex;align-items:center;gap:15px;padding:0 18px;margin-top:28px;text-align:left}
.hero-search>span:nth-child(2){font-size:14px;color:#859197;flex:1}
.hero-search kbd{font-size:14px;border:1px solid #dbe3e5;border-radius:4px;padding:4px 7px;color:#869299}
.trend{display:flex;gap:12px;margin-top:15px;align-items:center;font-size:14px;color:#849197}
.trend button{border:0;background:none;color:#536970;text-decoration:underline;text-underline-offset:4px}
.hero-system{position:relative}
.grid-orbit{width:510px;height:510px;border:1px dashed #007d7333;border-radius:50%;position:absolute;top:45px;left:-20px}
.grid-orbit:after{content:"";position:absolute;inset:75px;border:1px solid #007d7322;border-radius:50%}
.system-card{position:absolute;background:#fff;border:1px solid #cfe1dd;border-radius:7px;box-shadow:0 18px 45px #05484117;padding:18px 20px;z-index:2}
.system-card small{display:block;font-size:14px;color:#849299;letter-spacing:.12em;margin-bottom:10px}
.sc-one{width:245px;top:88px;left:1%}
.sc-one>b{font-size:14px}
.sc-one button{display:block;width:100%;margin-top:15px;border:0;background:var(--green);color:#fff;padding:11px;border-radius:4px;font-size:14px}
.sc-two{width:290px;top:260px;left:24%}
.sc-two code{font-size:14px}
.sc-two code i{display:inline-block;width:12px;height:12px;background:var(--green);border-radius:3px;vertical-align:-2px}
.sc-two>b{float:right;color:var(--green);font-size:14px}
.sc-three{width:235px;top:390px;left:3%}
.sc-three span{font-size:14px;color:var(--green);margin-right:9px}
.section-title{margin-bottom:28px}
.section-title h2{font-size:30px;letter-spacing:-.03em;margin:7px 0}
.section-title>p:last-child{font-size:14px;color:#74848b}
.section-title.horizontal{display:flex;justify-content:space-between;align-items:end}
.quick-start,.home-components,.content-wrap{padding:75px 8vw;max-width:1500px;margin:auto}
.role-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.role-grid>button{background:white;border:1px solid var(--line);padding:25px;text-align:left;border-radius:6px;transition:.2s}
.role-grid>button:hover{transform:translateY(-4px);border-color:#a8ccc6;box-shadow:0 13px 28px #103e3912}
.ui-icon{width:42px;height:42px;border-radius:11px;background:var(--mint);color:var(--green);display:grid;place-items:center;font-size:14px;font-weight:800;margin-bottom:25px}
.role-grid b{display:block;font-size:16px}
.role-grid p{font-size:14px;line-height:1.65;color:#697981;min-height:24px;margin-top:8px}
.role-grid>button>span:last-child{font-size:14px;color:var(--green);font-weight:700}
.home-components{padding-top:40px}
.text-link,.outline-btn{background:white;border:1px solid #cbd9d8;padding:10px 14px;font-size:14px;color:var(--green);border-radius:4px}
.featured-grid,.component-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.component-card{border:1px solid var(--line);background:#fff;border-radius:6px;overflow:hidden;transition:.2s;cursor:pointer}
.component-card:hover,.component-card:focus-visible{transform:translateY(-3px);box-shadow:0 13px 30px #163e3915,0 0 0 2px #53cabc55;border-color:#68bdb4}
.component-card:active{transform:translateY(-1px);box-shadow:0 6px 16px #163e3914}
.component-card .preview-wrap{transition:background .2s}
.component-card:hover .preview-wrap,.component-card:focus-visible .preview-wrap{background:#e8f3f1}
.preview-wrap{height:165px;background:#f2f6f5;display:grid;place-items:center;position:relative;border-bottom:1px solid #e3e9e9}
.status{position:absolute;right:10px;top:10px;background:#dff2ee;color:var(--green);font-size:14px;padding:4px 7px;border-radius:10px}
.status.trial{background:#fff0c6;color:#866215}
.status.maintain{background:#e9eef0;color:#5d6d75}
.demo{font-size:14px}
.primary-demo,.secondary-demo{border:0;padding:10px 15px;border-radius:4px;font-size:14px}
.primary-demo{background:var(--green);color:#fff}
.secondary-demo{background:white;border:1px solid #b9c8cc;margin-left:5px}
.field-demo{width:74%}
.field-demo label,.field-demo small{display:block}
.field-demo label{font-weight:700;margin-bottom:5px}
.field-demo label b{color:#b74747}
.field-demo div{background:#fff;border:1px solid #b9c8cc;padding:9px;border-radius:3px;color:#9aa5aa}
.field-demo small{margin-top:4px;color:#7d8a90}
.table-demo{width:82%;display:grid;grid-template-columns:1.2fr 1fr .8fr;background:white;border:1px solid #d6dfdf}
.table-demo>*{padding:8px;font-size:14px}
.table-demo>b{background:#e8efee}
.table-demo em{font-style:normal;color:#8b6411}
.dialog-demo{width:72%;background:white;padding:14px;box-shadow:0 8px 20px #00000012}
.dialog-demo b{font-size:14px}
.dialog-demo p{font-size:14px;color:#76848a}
.dialog-demo span{display:block;text-align:right;font-size:14px}
.dialog-demo strong{background:var(--green);color:#fff;padding:5px 8px;border-radius:2px}
.tabs-demo{width:78%;background:white;border:1px solid #d7e1e1;padding:10px}
.tabs-demo b,.tabs-demo span{font-size:14px;margin-right:10px}
.tabs-demo b{color:var(--green);border-bottom:2px solid var(--green);padding-bottom:7px}
.tabs-demo p{margin:15px 0 2px;color:#859198}
.alert-demo{display:flex;gap:8px;width:77%;padding:10px;background:#fff4d4;border-left:3px solid var(--yellow)}
.alert-demo>b{width:16px;height:16px;border-radius:50%;background:var(--yellow);color:white;display:grid;place-items:center}
.alert-demo span,.alert-demo small{display:block}
.alert-demo small{margin-top:3px;color:#786d50}
.search-demo{width:75%;background:white;border:1px solid #c4d0d2;border-radius:20px;padding:9px 12px;color:#829096}
.search-demo .search-symbol{width:11px;height:11px;margin-right:8px}
.accordion-demo{width:78%;background:white;border:1px solid #d6e0e1;padding:12px}
.accordion-demo span{float:right}
.accordion-demo p{border-top:1px solid #e6ebec;padding-top:9px;color:#79868d}
.component-info{padding:16px}
.component-info>small{font-size:14px;color:var(--green);letter-spacing:.08em}
.component-info h3{font-size:14px;margin:5px 0}
.component-info h3 em{display:block;font-size:14px;color:#87939a;font-style:normal;font-weight:400;margin-top:2px}
.component-info>p{font-size:14px;line-height:1.55;color:#65767e;min-height:47px}
.resource-row{display:flex;gap:6px;flex-wrap:wrap}
.resource-row span{font-size:14px;color:#4c746f;background:#edf5f3;padding:3px 5px}
.component-info footer{display:flex;border-top:1px solid #e6ebec;margin-top:13px;padding-top:11px;font-size:14px;color:#87949a}
.component-info footer b{margin-left:auto;color:var(--green)}
.governance{margin-top:70px;padding:50px 8vw;background:var(--deep);color:white;display:flex;align-items:center;gap:6vw}
.governance h2{margin:5px 0}
.governance .kicker{color:#72c8bd}
.health{display:flex;gap:35px;flex:1}
.health b{font-size:21px;border-left:1px solid #ffffff33;padding-left:16px}
.health small{display:block;color:#9fc0bc;font-size:14px;font-weight:400}
.governance>button{border:1px solid #ffffff55;background:none;color:white;padding:11px 15px;font-size:14px}
.page-hero{min-height:280px;background:linear-gradient(120deg,#f4f8f7,#e7f2ef);padding:36px 9vw 52px;display:flex;justify-content:space-between;align-items:end}
.breadcrumb{display:flex;gap:8px;font-size:14px;color:#829096;margin-bottom:40px}
.breadcrumb button{border:0;background:none;padding:0;color:#708187}
.page-hero h1{font-size:42px;letter-spacing:-.04em;margin:8px 0}
.page-hero>div>p:last-child{font-size:14px;color:#62737b}
.page-stat{display:flex;flex-direction:column;align-items:flex-end}
.page-stat b{font-size:40px;color:var(--green)}
.page-stat span{font-size:14px;color:#74838a}
.intro-strip{background:var(--deep);color:white;padding:25px 30px;display:grid;grid-template-columns:160px 1fr auto;align-items:center;margin-bottom:35px}
.intro-strip b{font-size:14px}
.intro-strip p{font-size:14px;color:#b3cac7;margin:0}
.intro-strip button{border:1px solid #ffffff55;color:white;background:none;padding:9px 12px;font-size:14px}
.guide-list article{display:grid;grid-template-columns:55px 55px 1fr auto;gap:20px;align-items:start;border-top:1px solid var(--line);padding:28px 10px}
.guide-number{font:11px monospace;color:#9aa5aa}
.guide-list .ui-icon{margin:0}
.guide-list small{font-size:14px;color:var(--green)}
.guide-list h2{font-size:20px;margin:5px 0}
.guide-list p{font-size:14px;color:#687880;max-width:630px}
.guide-list ol{display:flex;gap:20px;padding:0;list-style-position:inside;font-size:14px;color:#556871}
.guide-list>article>button{border:0;background:none;color:var(--green);font-size:14px}
.request-cta{background:var(--warm);padding:35px;display:flex;justify-content:space-between;align-items:center;margin-top:30px}
.request-cta small{color:#8f6a23}
.request-cta h2{margin:5px 0}
.request-cta p{font-size:14px;color:#736c60}
.request-cta button{border:0;background:var(--green);color:white;padding:12px 17px;font-size:14px}
.updated{font-size:14px;color:#839198}
.foundation-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.foundation-grid article{border:1px solid var(--line);padding:25px;border-radius:5px;cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s,background .2s}
.foundation-grid article:hover,.foundation-grid article:focus-visible{transform:translateY(-3px);border-color:#68bdb4;box-shadow:0 13px 30px #163e3915,0 0 0 2px #53cabc55;background:#f7fbfa}
.foundation-grid article:active{transform:translateY(-1px);box-shadow:0 6px 16px #163e3914}
.foundation-icon{width:48px;height:48px;border-radius:12px;background:#e6f4f1;color:var(--green);display:grid;place-items:center;font-size:14px;font-weight:800;margin-bottom:25px}
.foundation-icon.f1{background:#eef0fb;color:#6068a5}
.foundation-icon.f2{background:#fff2d5;color:#9a6f16}
.foundation-icon.f3{background:#f4eaf8;color:#895aa1}
.foundation-icon.f4{background:#eaf2fb;color:#4e7194}
.foundation-icon.f5{background:#eff1f2;color:#52636d}
.foundation-grid small{font-size:14px;color:#849198}
.foundation-grid h2{font-size:18px;margin:6px 0}
.foundation-grid p{font-size:14px;line-height:1.6;color:#677880;min-height:48px}
.foundation-grid footer{display:flex;border-top:1px solid #e5ebec;padding-top:12px;font-size:14px;color:#7d8b92}
.foundation-grid footer b{margin-left:auto;color:var(--green)}
.principle{background:var(--deep);color:white;margin-top:55px;padding:45px;display:grid;grid-template-columns:1fr 1fr;gap:8vw}
.principle small{color:#70c5ba}
.principle h2{font-size:25px;line-height:1.55}
.principle>div:last-child p{display:flex;gap:15px;border-bottom:1px solid #ffffff24;padding-bottom:15px}
.principle p>b{color:#70c5ba;font:10px monospace}
.principle p span{font-size:14px;color:#9fbeba}
.principle p strong{display:block;color:white;font-size:14px;margin-bottom:3px}
.token-explainer{background:var(--deep);color:white;padding:35px;display:grid;grid-template-columns:1fr 1.3fr;gap:35px;margin-bottom:55px;position:relative}
.token-explainer small{font-size:14px;color:#71c5bb}
.token-explainer h2{margin:7px 0}
.token-explainer p{font-size:14px;color:#abc5c1}
.token-explainer>code{align-self:center;background:#042f2c;padding:20px;font-size:18px}
.token-explainer code i{color:#81d8ce}
.token-explainer code em{color:#f0c572}
.token-explainer code strong{color:#d0a7ec}
.token-explainer code span{color:#86b8ef}
.code-labels{grid-column:2;display:grid;grid-template-columns:repeat(4,1fr);font-size:14px;color:#88aaa6;margin-top:-25px;padding:0 20px}
.style-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.style-grid article{border:1px solid var(--line);display:grid;grid-template-columns:42% 58%;min-height:190px}
.style-visual{background:#f1f5f4;position:relative;overflow:hidden}
.style-visual.palette i{position:absolute;width:60px;height:60px;border-radius:50%}
.style-visual.palette i:nth-child(1){background:#007d73;left:25px;top:35px}
.style-visual.palette i:nth-child(2){background:#f5c85e;left:70px;top:65px}
.style-visual.palette i:nth-child(3){background:#283942;left:42px;top:100px}
.style-visual.type b,.style-visual.icon b,.style-visual.layers b{font-size:45px;position:absolute;inset:0;display:grid;place-items:center;color:var(--green)}
.style-visual.spacing{background:repeating-linear-gradient(90deg,#e0ece9 0 1px,transparent 1px 16px),#f1f5f4}
.style-visual.radius i{position:absolute;border:2px solid var(--green);width:55px;height:55px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:18px}
.style-visual.shadow i{position:absolute;background:white;width:70px;height:50px;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 13px 25px #163d3830}
.style-visual.motion i{position:absolute;width:15px;height:15px;border-radius:50%;background:var(--green);top:50%;left:25%;box-shadow:35px 0 #68bcb4,70px 0 #badbd7}
.style-grid article>div:last-child{padding:25px}
.style-grid small{font-size:14px;color:#859198}
.style-grid h3{font-size:18px;margin:5px 0}
.style-grid p{font-size:14px;color:var(--green)}
.style-grid button{border:0;background:none;padding:25px 0 0;color:var(--green);font-size:14px}
.token-table-block{margin-top:60px}
.token-table{border:1px solid var(--line)}
.token-row{display:grid;grid-template-columns:2fr 1fr .8fr 60px;align-items:center;min-height:55px;border-top:1px solid #e6ebec;padding:0 16px;font-size:14px}
.token-row.head{background:#edf3f2;border:0;min-height:38px;color:#75858c}
.token-row code{color:var(--green)}
.token-row code i{display:inline-block;width:18px;height:18px;border-radius:3px;vertical-align:middle;margin-right:8px;border:1px solid #0001}
.token-row button{border:1px solid #d2dedf;background:white;font-size:14px;padding:5px;color:var(--green)}
.token-table-block input{border:1px solid #cbd7d9;padding:8px 11px;font-size:14px}
.component-browser{display:grid;grid-template-columns:190px 1fr;gap:35px;padding:45px 8vw 90px;max-width:1500px;margin:auto}
.component-browser aside>b{display:block;font-size:14px;color:#87949a;margin:0 10px 10px}
.component-browser #component-categories>button{width:100%;border:0;background:none;padding:10px;display:flex;font-size:14px;color:#63747c;border-radius:3px}
.component-browser #component-categories>button em{margin-left:auto;font-style:normal;font-size:14px;color:#8b979d}
.component-browser #component-categories>button.active{background:#e5f2ef;color:var(--green);font-weight:700}
.side-help{background:var(--warm);padding:16px;margin-top:25px}
.side-help b{font-size:14px}
.side-help p{font-size:14px;line-height:1.6;color:#756d5f}
.side-help button{border:0;background:none;color:#8b6519;padding:0;font-size:14px}
.browser-tools{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.inline-search{height:38px;flex:1;border:1px solid #c7d4d6;display:flex;align-items:center;gap:10px;padding:0 12px;border-radius:3px}
.inline-search .search-symbol{width:12px;height:12px}
.inline-search input{border:0;outline:0;flex:1;font-size:14px}
.filter-control{height:38px;border:1px solid #cbd7d8;background:white;padding:0 13px;font-size:14px}
.browser-tools>span{font-size:14px;color:#849198}
.component-browser .component-grid{grid-template-columns:repeat(3,1fr)}
.registry-content{max-width:1500px}
.registry-meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;font-size:14px;color:var(--muted)}
.registry-meta span{padding:7px 10px;background:var(--surface);border:1px solid var(--line);border-radius:4px}
.registry-links{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:55px}
.registry-links a{text-decoration:none}
.registry-content section+section{margin-top:55px}
.registry-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:6px}
.registry-table{width:100%;min-width:980px;border-collapse:collapse;font-size:14px}
.registry-table th,.registry-table td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.55}
.registry-table th{background:#edf4f2;color:#52646c;font-weight:800;white-space:nowrap}
.registry-table tbody tr:last-child td{border-bottom:0}
.registry-table td code{font-size:12px;color:var(--green);overflow-wrap:anywhere}
.registry-table td small{display:block;margin-top:3px;color:var(--muted)}
.registry-table a{color:var(--green);font-weight:700}
.registry-status{display:inline-block;margin:0 4px 4px 0;padding:3px 7px;border-radius:10px;background:#e9eef0;color:#5d6d75;font-size:12px;font-weight:700;white-space:nowrap}
.registry-status.verified{background:#dff2ee;color:var(--green)}
.registry-status.pending{background:#fff0c6;color:#866215}
.page-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:35px}
.page-tabs button{position:relative;border:0;background:none;padding:12px 15px;color:#687981;font-size:14px;font-weight:700}
.page-tabs button.active{color:var(--green)}
.page-tabs button.active:after{content:"";position:absolute;right:0;bottom:-1px;left:0;height:3px;background:var(--green)}
.token-registry .section-title input{width:min(360px,100%);padding:10px 12px;border:1px solid #cbd9d8;border-radius:4px;background:#fff;color:var(--text);font-size:14px}
.collection-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.collection-tabs button{border:1px solid #cbd9d8;border-radius:4px;background:#fff;padding:8px 10px;color:#5d6d75;font-size:14px}
.collection-tabs button:hover{border-color:#82bcb5;color:var(--green)}
.collection-tabs button.active{border-color:var(--green);background:var(--mint);color:var(--green);font-weight:800}
.collection-tabs em{font-style:normal;margin-left:5px;font-size:12px;color:#829097}
.collection-tabs button.active em{color:var(--green)}
.collection-summary{margin:0 0 14px;color:var(--muted);font-size:14px}
.token-value{display:block}
.token-swatch{display:block;width:48px;height:16px;margin-top:8px;border:1px solid #c7d4d5;border-radius:4px}
.governance-overview,.token-layer-grid,.governance-code-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.governance-overview article,.token-layer-grid article,.governance-code-grid article{padding:20px;border:1px solid var(--line);border-radius:6px;background:#fff}
.governance-overview small,.token-layer-grid small,.governance-code-grid small{display:block;color:var(--green);font-size:12px;font-weight:800;letter-spacing:.08em}
.governance-overview h3,.token-layer-grid h3{margin:8px 0;font-size:18px}
.governance-overview p,.token-layer-grid p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}
.governance-section{margin-top:55px}
.token-layer-grid{grid-template-columns:repeat(3,1fr)}
.token-layer-grid code,.governance-code-grid code{display:block;margin-top:14px;padding:9px 10px;border-radius:4px;background:#edf5f3;color:var(--green);font-size:12px;overflow-wrap:anywhere}
.governance-code-grid article{display:grid;gap:8px}
.governance-code-grid code{margin:0}
.governance-code-list{display:grid;gap:8px;margin-top:14px}
.governance-code-list code{display:block;padding:9px 10px;border-radius:4px;background:#edf5f3;color:var(--green);font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.governance-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.governance-list li{padding:14px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.65;color:var(--muted)}
.no-result{text-align:center;background:var(--surface);padding:60px}
.no-result b{font-size:16px}
.no-result p{font-size:14px;color:#73838a}
.no-result button{border:0;background:var(--green);color:white;padding:9px 14px;font-size:14px}
.availability{display:flex;flex-direction:column;align-items:end;gap:5px}
.availability span{font-size:14px;color:var(--green)}
.availability i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#3db285}
.availability small{color:#74838a}
.develop-hero{display:grid;grid-template-columns:1.4fr .6fr;background:var(--deep);color:white}
.develop-hero>div:first-child{padding:38px}
.develop-hero small{font-size:14px;color:#70c6bb}
.develop-hero h2{margin:7px 0}
.develop-hero p{font-size:14px;color:#aac5c1}
.develop-hero code{display:block;background:#032c29;padding:15px;font-size:14px;margin-top:20px}
.develop-hero code span{color:#68c8bd}
.support-matrix{background:#0b4b45;padding:30px}
.support-matrix>b{font-size:14px}
.support-matrix p{display:flex;border-bottom:1px solid #ffffff1c;padding-bottom:9px;font-size:14px}
.support-matrix em{margin-left:auto;font-style:normal}
.available{color:#73d1c4}
.progress{color:#f0c572}
.resource-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:40px 0}
.resource-grid article{border:1px solid var(--line);padding:23px}
.resource-grid .ui-icon{margin-bottom:20px}
.resource-grid small{font-size:14px;color:#849198}
.resource-grid h2{font-size:17px}
.resource-grid p{font-size:14px;line-height:1.6;color:#6a7a82;min-height:45px}
.resource-grid button{border:0;background:none;padding:0;color:var(--green);font-size:14px}
.compatibility{border-top:1px solid var(--line);padding-top:30px;display:grid;grid-template-columns:230px 1fr}
.compatibility small{font-size:14px;color:var(--green)}
.compatibility h2{margin:5px 0}
.compatibility p{font-size:14px;color:#839097}
.compatibility table{border-collapse:collapse;font-size:14px}
.compatibility th,.compatibility td{text-align:left;border-bottom:1px solid var(--line);padding:11px}
.compatibility th{color:#7b8990}
.ok{color:var(--green)}
.warn{color:#996d16}
.update-layout{display:grid;grid-template-columns:1fr 280px;gap:60px}
.update-item{display:grid;grid-template-columns:55px 1fr 50px;gap:15px;border-top:1px solid var(--line);padding:20px 5px}
.update-item time{font:10px monospace;color:#87949a}
.change{font-size:14px;padding:2px 5px;background:#e2f3ef;color:var(--green)}
.change.docs{background:#eceafb;color:#645b91}
.change.improve{background:#fff1cd;color:#8c6615}
.change.notice{background:#edf0f2;color:#5e6d76}
.update-item h3{font-size:14px;margin:5px 0}
.update-item p{font-size:14px;color:#718088}
.update-item button{border:0;background:none;color:var(--green);font-size:14px}
.governance-side article{border:1px solid var(--line);padding:22px;margin-bottom:15px}
.governance-side small{font-size:14px;color:#809097}
.governance-side h2{font-size:34px;color:var(--green);margin:8px 0 0}
.governance-side p{font-size:14px;color:#718188}
.progress-bar{height:5px;background:#e8eeef}
.progress-bar i{display:block;width:94%;height:100%;background:var(--green)}
.governance-side ul{list-style:none;padding:0;font-size:14px}
.governance-side li{display:flex;margin-top:8px}
.governance-side li b{margin-left:auto}
.owner-card h3{font-size:14px}
.owner-card button{border:0;background:none;padding:0;color:var(--green);font-size:14px}
.deprecation{display:flex;gap:12px;background:#fff7dd}
.deprecation>b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:white}
.deprecation h3{margin:4px 0}
.search-overlay,.detail-overlay{position:fixed;inset:0;background:#071c1a99;z-index:60;backdrop-filter:blur(4px)}
.search-dialog{width:min(650px,92vw);margin:10vh auto;background:white;border-radius:8px;overflow:hidden;box-shadow:0 25px 70px #0003}
.search-input{height:64px;display:flex;align-items:center;gap:14px;padding:0 20px;border-bottom:1px solid var(--line)}
.search-input input{border:0;outline:0;flex:1;font-size:14px}
.popup-close{width:36px;height:36px;display:grid;place-items:center;flex:0 0 auto;border:1px solid var(--line);border-radius:50%;background:white;color:var(--text);cursor:pointer;transition:background .15s,border-color .15s}
.popup-close:hover{background:#eef5f3;border-color:#b8ccc7}
.popup-close:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.popup-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.search-results{padding:15px}
.search-results>small{display:block;font-size:14px;color:#859198;margin:0 8px 8px}
.search-results>button{display:grid;grid-template-columns:52px 1fr 20px;align-items:center;width:100%;border:0;background:white;padding:10px 8px;text-align:left;border-radius:4px}
.search-results>button:hover{background:#eef5f3}
.result-type{font-size:14px;background:#e5f3f0;color:var(--green);padding:3px 5px;width:max-content}
.search-results b{font-size:14px}
.search-results b small{display:block;font-size:14px;color:#839097;font-weight:400;margin-top:2px}
.search-results em{font-style:normal;color:#89969c}
.search-help{margin:0;padding:10px 20px;background:#f3f6f6;font-size:14px;color:#839097}
.search-empty{text-align:center;padding:35px;font-size:14px;color:#7a898f}
.detail-overlay{display:flex;justify-content:flex-end}
.detail-panel{height:100%;width:min(780px,100%);background:white;overflow:auto;position:relative;box-shadow:-20px 0 60px #0002}
.detail-close{position:absolute;right:20px;top:18px;box-shadow:0 3px 12px #0002;z-index:2}
.detail-head{background:#f0f6f4;padding:45px 40px 30px;display:flex;justify-content:space-between}
.detail-head small{font-size:14px;color:var(--green)}
.detail-head h1{font-size:30px;margin:8px 0}
.detail-head h1 em{display:block;font-style:normal;font-size:14px;color:#7d8a91}
.detail-head p{font-size:14px;color:#64757d;max-width:520px}
.detail-meta{display:flex;flex-direction:column;align-items:end;padding-top:10px;gap:7px}
.detail-meta .status{position:static}
.detail-meta b{font-size:14px}
.detail-resources{padding:13px 40px;border-bottom:1px solid var(--line);display:flex;gap:10px}
.detail-resources span{font-size:14px;background:#edf5f3;color:#4f746f;padding:4px 6px}
.detail-resources span:last-child{margin-left:auto;background:none;color:#6d7c83}
.detail-tabs{padding:0 40px;border-bottom:1px solid var(--line);display:flex;gap:20px;overflow:auto}
.detail-tabs button{border:0;background:none;padding:16px 0;font-size:14px;position:relative;white-space:nowrap}
.detail-tabs button.active{color:var(--green);font-weight:700}
.detail-tabs button.active:after{content:"";height:2px;background:var(--green);position:absolute;bottom:-1px;left:0;right:0}
.detail-grid{display:grid;grid-template-columns:1fr 250px;gap:30px;padding:30px 40px}
.detail-grid h2,.detail-section h2{font-size:14px}
.detail-preview{height:220px;background:#f2f6f5;display:grid;place-items:center}
.detail-preview .preview-wrap{height:100%}
.detail-section{border-top:1px solid var(--line);margin-top:25px;padding-top:20px}
.detail-section p{font-size:14px;line-height:1.7;color:#66777f}
.detail-grid aside{border-left:1px solid var(--line);padding-left:25px}
.detail-grid aside li:last-child,.detail-grid aside>h2:nth-of-type(2),.detail-grid aside>.token-copy{display:none}
.detail-grid aside ul{list-style:none;padding:0}
.detail-grid aside li{display:flex;border-bottom:1px solid #e7eced;padding:9px 0;font-size:14px}
.detail-grid aside li b{margin-left:auto}
.token-copy{width:100%;display:flex;justify-content:space-between;border:1px solid #d7e1e1;background:#f7faf9;padding:9px;margin-bottom:6px}
.token-copy code{font-size:14px;color:var(--green)}
.token-copy span{font-size:14px}
.wide{border:0;margin:0;padding:32px 40px}
.spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:25px 0}
.spec-grid article{background:#edf5f3;padding:17px;text-align:center}
.spec-grid b{display:block;color:var(--green);font-size:16px}
.spec-grid span{font-size:14px}
.spec-table{width:100%;border-collapse:collapse;font-size:14px}
.spec-table th,.spec-table td{padding:11px;border-bottom:1px solid var(--line);text-align:left}
.do-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:25px 0}
.do-grid article{padding:20px;border-top:3px solid var(--green);background:#eff7f5}
.do-grid article.dont{border-color:#b65d5d;background:#fbf1f1}
.do-grid small{font-size:14px;color:var(--green)}
.dont small{color:#a45151}
.do-grid b{display:block;font-size:14px;margin-top:6px}
.bullet-list{font-size:14px;line-height:2;color:#62737b}
.a11y-list p{display:grid;grid-template-columns:70px 1fr;align-items:center;border-bottom:1px solid var(--line);padding:13px}
.a11y-list kbd{width:max-content;background:#edf1f2;border:1px solid #cfd9db;padding:5px 8px}
.a11y-list span,.a11y-list b{display:block}
.a11y-list b{color:var(--text)}
.a11y-note{background:#fff5d8;border-left:3px solid var(--yellow);padding:15px;display:flex;gap:15px;font-size:14px}
.resource-table>div{display:grid;grid-template-columns:100px 1fr 100px 50px;border-top:1px solid var(--line);padding:13px;align-items:center;font-size:14px}
.resource-table em{font-style:normal;color:var(--green)}
.resource-table button{border:0;background:none;color:var(--green);font-size:14px}
.mini-change{display:flex;border-top:1px solid var(--line);padding:12px;font-size:14px}
.mini-change span{margin-left:auto;color:#74838a}
.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,15px);background:var(--deep);color:white;padding:10px 14px;border-radius:4px;font-size:14px;opacity:0;transition:.2s;z-index:80}
.toast.show{opacity:1;transform:translate(-50%,0)}
footer{background:#edf4f2;border-top:1px solid #d9e4e2;padding:28px 7vw;display:flex;align-items:center;gap:30px;font-size:14px;color:#6c7c83}
.footer-brand{display:flex;align-items:center;gap:9px}
.footer-brand .logo{width:26px;height:26px;padding:6px}
.footer-brand .logo i{width:3px}
.footer-brand .logo i:nth-child(1){height:7px}
.footer-brand .logo i:nth-child(2){height:13px}
.footer-brand .logo i:nth-child(3){height:10px}
footer p{margin:0}
footer>span{margin-left:auto}
[hidden]{display:none!important}
@media(max-width:1050px){.app-header nav{gap:14px}
.featured-grid{grid-template-columns:repeat(2,1fr)}
.role-grid{grid-template-columns:repeat(2,1fr)}
.component-browser .component-grid{grid-template-columns:repeat(2,1fr)}
.resource-grid{grid-template-columns:repeat(2,1fr)}
.header-tools,.brand{min-width:150px}
.hero-content{padding-left:6vw}
.foundation-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){.app-header{height:64px;padding:0 4vw}
.brand{min-width:0}
.brand>span:last-child{display:none}
.app-header nav{overflow:auto;margin:0;justify-content:flex-start}
.app-header nav button,.app-header nav a{white-space:nowrap}
.app-header nav a[data-page="start"],.app-header nav a[data-page="develop"],.app-header nav a[data-page="updates"],.app-header nav a[data-page="token-registry"],.app-header nav a[data-page="registry"]{display:none}
.header-tools{min-width:auto}
.help,.avatar{display:none}
.home-hero{display:block;min-height:auto}
.hero-content{padding:55px 6vw 75px}
.hero-content h1{font-size:38px}
.hero-system{display:none}
.quick-start,.home-components,.content-wrap{padding:55px 5vw}
.role-grid,.featured-grid,.foundation-grid,.style-grid,.resource-grid{grid-template-columns:1fr}
.section-title.horizontal{display:block}
.governance{align-items:flex-start;flex-direction:column}
.health{display:grid;grid-template-columns:1fr 1fr}
.page-hero{min-height:230px;padding:30px 6vw;align-items:flex-end}
.page-hero h1{font-size:34px}
.page-stat,.availability{display:none}
.intro-strip{grid-template-columns:1fr;gap:12px}
.guide-list article{grid-template-columns:35px 1fr}
.guide-list .ui-icon{display:none}
.guide-list article>div:nth-child(3){grid-column:2}
.guide-list>article>button{grid-column:2;text-align:left}
.guide-list ol{display:block}
.request-cta,.principle{display:block}
.request-cta button{margin-top:15px}
.token-explainer{grid-template-columns:1fr;padding:25px 18px}
.token-explainer>code,.code-labels{grid-column:1}
.token-explainer>code{font-size:14px;overflow:auto}
.style-grid article{grid-template-columns:35% 65%}
.component-browser{display:block;padding:30px 4vw}
.component-browser aside{display:none}
.component-browser .component-grid{grid-template-columns:1fr}
.registry-content section+section{margin-top:42px}
.registry-links{margin-bottom:42px}
.token-layer-grid{grid-template-columns:1fr}
.governance-overview,.governance-code-grid{grid-template-columns:1fr}
.filter-control{display:none}
.develop-hero{grid-template-columns:1fr}
.compatibility{grid-template-columns:1fr}
.compatibility table{margin-top:20px}
.update-layout{grid-template-columns:1fr}
.detail-head{padding:40px 25px 25px}
.detail-meta{display:none}
.detail-resources,.detail-tabs{padding-left:25px;padding-right:25px}
.detail-resources span:last-child{display:none}
.detail-grid{grid-template-columns:1fr;padding:25px}
.detail-grid aside{border-left:0;border-top:1px solid var(--line);padding:20px 0}
.wide{padding:25px}
.spec-grid{grid-template-columns:repeat(2,1fr)}
.do-grid{grid-template-columns:1fr}
.resource-table>div{grid-template-columns:75px 1fr 70px}
.resource-table button{display:none}
footer{flex-wrap:wrap}
footer>span{margin-left:0;width:100%}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}
}

.theme-toggle{width:38px;height:38px;border:1px solid #dbe4e5;border-radius:50%;background:white;display:grid;place-items:center;color:var(--green);transition:background .2s,border-color .2s,color .2s}
.theme-toggle span{font-size:20px;line-height:1}

[data-theme="dark"]{--green:#53cabc;--green2:#67d8cb;--deep:#062e2b;--dark:#edf5f4;--text:#e8f0ef;--muted:#a9babd;--line:#34484b;--surface:#182529;--mint:#183d3a;--warm:#332f25;--yellow:#efbd51;color-scheme:dark}
[data-theme="dark"] body{background:#101a1e;color:var(--text)}
[data-theme="dark"] .app-header{background:#111d21f2;border-color:var(--line)}
[data-theme="dark"] .app-header nav button,[data-theme="dark"] .app-header nav a{color:#b8c6c8}
[data-theme="dark"] .app-header nav button.active,.app-header nav a.active{color:var(--green)}
[data-theme="dark"] .theme-toggle,[data-theme="dark"] .help{background:#1a292d;border-color:#3a4d50;color:#c4d1d2}
[data-theme="dark"] .avatar{background:var(--green);color:#09221f}
[data-theme="dark"] .home-hero,[data-theme="dark"] .page-hero{background:linear-gradient(125deg,#152428,#192d2e 60%,#143634 100%)}
[data-theme="dark"] .hero-content>p:not(.kicker),[data-theme="dark"] .page-hero>div>p:last-child,[data-theme="dark"] .section-title>p:last-child{color:#adbec0}
[data-theme="dark"] .hero-search,[data-theme="dark"] .system-card,[data-theme="dark"] .role-grid>button,[data-theme="dark"] .component-card,[data-theme="dark"] .foundation-grid article,[data-theme="dark"] .style-grid article,[data-theme="dark"] .resource-grid article{background:#172529;border-color:var(--line);color:var(--text)}
[data-theme="dark"] .hero-search>span:nth-child(2),[data-theme="dark"] .component-info>p,[data-theme="dark"] .role-grid p,[data-theme="dark"] .foundation-grid p,[data-theme="dark"] .resource-grid p{color:#acbec0}
[data-theme="dark"] .preview-wrap,[data-theme="dark"] .style-visual,[data-theme="dark"] .detail-preview{background:#1d2d31;border-color:var(--line)}
[data-theme="dark"] .field-demo div,[data-theme="dark"] .table-demo,[data-theme="dark"] .dialog-demo,[data-theme="dark"] .tabs-demo,[data-theme="dark"] .search-demo,[data-theme="dark"] .accordion-demo,[data-theme="dark"] .secondary-demo{background:#24363a;border-color:#496064;color:#dce8e7}
[data-theme="dark"] .table-demo>b{background:#31464a}
[data-theme="dark"] .alert-demo{background:#4a3d20;color:#ffe1a1}
[data-theme="dark"] .status{background:#164640;color:#7ddbd0}
[data-theme="dark"] .status.trial{background:#473b1e;color:#f1c66a}
[data-theme="dark"] .status.maintain{background:#324044;color:#c1ced0}
[data-theme="dark"] .resource-row span,[data-theme="dark"] .detail-resources span{background:#1d4541;color:#8ee0d6}
[data-theme="dark"] .intro-strip,[data-theme="dark"] .principle,[data-theme="dark"] .token-explainer,[data-theme="dark"] .develop-hero,[data-theme="dark"] .governance{background:#062e2b}
[data-theme="dark"] .request-cta,[data-theme="dark"] .side-help,[data-theme="dark"] .deprecation{background:#332f25;color:#f0dfbb}
[data-theme="dark"] .component-browser #component-categories>button{color:#b7c5c7}
[data-theme="dark"] .component-browser #component-categories>button.active{background:#173f3b;color:var(--green)}
[data-theme="dark"] .registry-meta span,[data-theme="dark"] .registry-table th{background:#243438;border-color:var(--line);color:#b8c6c8}
[data-theme="dark"] .registry-table-wrap,[data-theme="dark"] .registry-table th,[data-theme="dark"] .registry-table td{border-color:var(--line)}
[data-theme="dark"] .registry-status{background:#324044;color:#c1ced0}
[data-theme="dark"] .registry-status.verified{background:#164640;color:#7ddbd0}
[data-theme="dark"] .registry-status.pending{background:#473b1e;color:#f1c66a}
[data-theme="dark"] .page-tabs button{color:#b8c6c8}
[data-theme="dark"] .page-tabs button.active{color:var(--green)}
[data-theme="dark"] .token-registry .section-title input,[data-theme="dark"] .governance-overview article,[data-theme="dark"] .token-layer-grid article,[data-theme="dark"] .governance-code-grid article{background:#172529;border-color:var(--line);color:var(--text)}
[data-theme="dark"] .collection-tabs button{background:#172529;border-color:#405458;color:#b8c6c8}
[data-theme="dark"] .collection-tabs button.active{background:#173f3b;border-color:var(--green);color:var(--green)}
[data-theme="dark"] .collection-tabs em{color:#acbec0}
[data-theme="dark"] .token-swatch{border-color:#6d8588}
[data-theme="dark"] .governance-overview p,[data-theme="dark"] .token-layer-grid p,[data-theme="dark"] .governance-list li{color:#acbec0}
[data-theme="dark"] .token-layer-grid code,[data-theme="dark"] .governance-code-grid code{background:#1d4541;color:#8ee0d6}
[data-theme="dark"] .governance-code-list code{background:#1d4541;color:#8ee0d6}
[data-theme="dark"] .inline-search,[data-theme="dark"] .filter-control,[data-theme="dark"] .token-table-block input{background:#172529;border-color:#405458;color:var(--text)}
[data-theme="dark"] .token-table,[data-theme="dark"] .token-row,[data-theme="dark"] .compatibility th,[data-theme="dark"] .compatibility td{border-color:var(--line)}
[data-theme="dark"] .token-row.head{background:#243438;color:#b8c6c8}
[data-theme="dark"] .token-row button,[data-theme="dark"] .outline-btn,[data-theme="dark"] .text-link{background:#172529;border-color:#405458;color:var(--green)}
[data-theme="dark"] .governance-side article{background:#172529;border-color:var(--line)}
[data-theme="dark"] .progress-bar{background:#304347}
[data-theme="dark"] .search-dialog,[data-theme="dark"] .detail-panel{background:#111c20;color:var(--text)}
[data-theme="dark"] .search-input,[data-theme="dark"] .detail-resources,[data-theme="dark"] .detail-tabs{border-color:var(--line)}
[data-theme="dark"] .search-input input{background:transparent;color:var(--text)}
[data-theme="dark"] .search-results>button{background:#111c20;color:var(--text)}
[data-theme="dark"] .search-results>button:hover{background:#1c3032}
[data-theme="dark"] .search-help{background:#1a292d;color:#adbbbd}
[data-theme="dark"] .detail-head{background:#182a2d}
[data-theme="dark"] .popup-close{background:#25373a;border-color:#405458;color:#fff}
[data-theme="dark"] .popup-close:hover{background:#30474a;border-color:#587074}
[data-theme="dark"] .detail-grid aside,[data-theme="dark"] .detail-section,[data-theme="dark"] .spec-table th,[data-theme="dark"] .spec-table td,[data-theme="dark"] .a11y-list p,[data-theme="dark"] .resource-table>div,[data-theme="dark"] .mini-change{border-color:var(--line)}
[data-theme="dark"] .spec-grid article,[data-theme="dark"] .do-grid article{background:#193b38}
[data-theme="dark"] .do-grid article.dont{background:#3d292b}
[data-theme="dark"] .a11y-note{background:#493b1d;color:#ffe0a0}
[data-theme="dark"] .token-copy{background:#1a2c2f;border-color:#405458;color:var(--text)}
[data-theme="dark"] footer{background:#121f23;border-color:var(--line);color:#adbbbd}
[data-theme="dark"] .component-card:hover .preview-wrap,[data-theme="dark"] .component-card:focus-visible .preview-wrap{background:#24383b}
[data-theme="dark"] .foundation-grid article:hover,[data-theme="dark"] .foundation-grid article:focus-visible{background:#1d3033}

.foundation-detail-head{align-items:center}
.foundation-detail-head .foundation-icon{margin:0 45px 0 25px;flex:none}
.foundation-detail-body{padding:32px 40px}
.foundation-detail-body section{border-bottom:1px solid var(--line);padding:0 0 22px;margin-bottom:24px}
.foundation-detail-body h2{font-size:20px;margin:0 0 10px}
.foundation-detail-body p{line-height:1.8;color:var(--muted)}
.foundation-note{display:flex;justify-content:space-between;background:var(--surface);border:0!important;padding:18px!important}
[data-theme="dark"] .foundation-note{background:#1b2c2f}

/* 首頁首屏採單欄設計，避免裝飾性元件圖與主要搜尋操作混淆。 */
.home-hero{display:block;min-height:auto}
.hero-content{max-width:1120px;padding:82px 9vw 90px}
.hero-search{max-width:820px}
.hero-search kbd{display:none}
.hero-system{display:none}