:root{font-family:-apple-system,BlinkMacSystemFont,"Noto Sans TC","PingFang TC",sans-serif;color:#172235;background:#f6f8fc;font-synthesis:none;--ink:#172235;--muted:#59677c;--blue:#4d5fe7;--line:#dce2ed}*{box-sizing:border-box}body{margin:0}a{color:var(--blue);text-underline-offset:5px}button,input,select{font:inherit}button,a{touch-action:manipulation}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #6a79fb;outline-offset:5px}header{position:sticky;top:0;z-index:5;background:#f6f8fce8;backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}nav{max-width:1240px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:18px 32px;gap:24px}.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap}.brand img{width:32px;height:32px}.navlinks{display:flex;flex-wrap:wrap;gap:24px;font-size:14px}.navlinks a{color:var(--muted);text-decoration:none}.navlinks a[aria-current=page]{color:var(--blue)}main{max-width:1200px;margin:auto;padding:0 32px}.hero{padding:96px 0 80px;display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center}.eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;color:var(--blue);text-transform:uppercase}h1{font-size:clamp(40px,5.1vw,68px);line-height:1.17;letter-spacing:-2px;margin:24px 0}h2{font-size:clamp(28px,3vw,42px);line-height:1.3;letter-spacing:-1px}h3{font-size:21px;line-height:1.4}p,li{line-height:1.85}p{color:var(--muted)}.lead{font-size:19px;max-width:660px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.button,button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 22px;border-radius:14px;border:1px solid transparent;background:var(--blue);color:#fff;font-weight:600;text-decoration:none;cursor:pointer}.button.secondary,button.secondary{background:#fff;color:var(--ink);border-color:var(--line)}button:disabled{opacity:.5;cursor:not-allowed}.hero-art{position:relative;background:radial-gradient(ellipse,#dfe6fc 0%,transparent 70%);padding:36px}.hero-art img{width:100%;height:auto;filter:drop-shadow(0 35px 25px #5e779722);animation:float 7s ease-in-out infinite}.glass-label{position:absolute;bottom:5%;right:0;padding:18px 22px;border:1px solid white;border-radius:20px;background:#ffffffb0;box-shadow:0 12px 45px #2638540d;backdrop-filter:blur(18px);font-size:14px}.pill{display:inline-flex;border:1px solid var(--line);border-radius:99px;padding:7px 12px;font-size:12px;color:var(--muted);background:#fff}.band{display:flex;justify-content:space-between;gap:20px;padding:25px 0;border-block:1px solid var(--line);font-size:14px;color:var(--muted)}section{padding:70px 0}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px}.card p{font-size:15px}.number{font-size:13px;color:var(--blue);font-weight:700}.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}.dark{background:#142036;color:#fff;border-radius:32px;padding:48px}.dark p{color:#c2cddd}.dark a{color:#aebaff}.article{max-width:850px;padding:60px 0 100px}.article h1{font-size:48px}.article h2{font-size:26px;margin-top:42px}.article li{color:var(--muted)}.note{padding:20px 24px;background:#eef1ff;border-left:3px solid var(--blue);border-radius:0 12px 12px 0;color:#334362;line-height:1.8}.warning{background:#fff7e6;border-color:#c59132}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;background:white;font-size:14px}td,th{text-align:left;padding:18px;border:1px solid var(--line);line-height:1.7;min-width:150px}th{background:#edf1f8}pre{background:#142036;color:#dee7fb;padding:24px;border-radius:18px;overflow:auto;font:13px/1.8 ui-monospace,SFMono-Regular,monospace}code{font-family:ui-monospace,SFMono-Regular,monospace}.toc{display:flex;flex-wrap:wrap;gap:16px;margin:28px 0}.demo{padding:30px;border:1px solid var(--line);border-radius:24px;background:#fff}.demo label{display:block;font-weight:600;margin:16px 0 8px}.demo input,.demo select{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;background:#fff}.demo input[type=checkbox]{width:auto}.demo canvas{max-width:100%;height:auto!important}.steps{padding-left:24px}.steps li{padding:8px}.status{white-space:pre-wrap;overflow-wrap:anywhere}.hidden,[hidden]{display:none!important}footer{border-top:1px solid var(--line);padding:40px 32px;max-width:1200px;margin:auto;display:flex;justify-content:space-between;gap:24px;color:var(--muted);font-size:13px}footer div{display:flex;flex-wrap:wrap;gap:20px}.small{font-size:13px}.skip{position:absolute;left:-9999px}.skip:focus{left:15px;top:15px;z-index:20;background:white;padding:15px}@keyframes float{50%{transform:translateY(-10px) rotate(2deg)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}@media(max-width:760px){nav{padding:14px 20px;flex-wrap:wrap;gap:14px}.navlinks{gap:16px;font-size:13px}main{padding:0 22px}.hero{padding:50px 0;grid-template-columns:1fr;gap:12px}.hero-art{max-width:380px;margin:auto}.grid,.split{grid-template-columns:1fr}.band{flex-wrap:wrap}.dark{padding:28px}.article h1{font-size:38px}section{padding:44px 0}footer{flex-direction:column}.card{padding:24px}} .protocol-diagrams{border:1px solid #dce2f0;border-radius:24px;overflow:hidden;background:#f7f9fd;margin:28px 0 56px}.diagram-tabs{display:flex;gap:6px;padding:12px;overflow:auto;background:#edf1fa}.diagram-tabs button{white-space:nowrap;background:transparent;color:#526078;padding:12px 18px;border-radius:12px;font-size:14px}.diagram-tabs button[aria-selected=true]{background:#fff;color:#394fd1;box-shadow:0 3px 14px #18294710}.diagram-panel{padding:24px;margin:0}.diagram-panel[hidden]{display:none}.protocol-flow{list-style:none;counter-reset:flow;padding:0;display:grid;gap:22px}.protocol-flow li{counter-increment:flow;position:relative;background:#fff;border:1px solid #dce2f0;border-radius:16px;padding:20px 20px 20px 64px}.protocol-flow li:before{content:counter(flow);position:absolute;left:20px;color:#4d5fe7;font-weight:700}.protocol-flow li:not(:last-child):after{content:'↓';position:absolute;bottom:-24px;left:30px;color:#8f9ac2}.protocol-flow p{font-size:14px;margin:8px 0 0}.diagram-note{padding:20px 24px;border-top:1px solid #dce2f0;font-size:13px;margin:0}.sequence-scroll{overflow-x:auto}.sequence{min-width:680px}.sequence-actors{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;text-align:center;font-size:13px}.sequence-actors strong{background:#e8ecfb;padding:16px 5px;border-radius:10px}.sequence-row{padding:18px 0 10px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(12.5% - 1px),#dde3f2 calc(12.5% - 1px),#dde3f2 12.5%,transparent 12.5%,transparent 25%)}.sequence-message{display:block;font-size:13px;text-align:center;background:#f7f9fd;width:fit-content;margin:auto;padding:0 8px}.sequence-track{height:26px;position:relative}.sequence-arrow{position:absolute;top:6px;border-bottom:1px solid #536ae2;height:14px;color:#536ae2;text-align:right;line-height:26px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:760px){.diagram-panel{padding:16px}.diagram-tabs button{padding:10px 12px}.protocol-flow li{padding-left:48px}} .a0-0{left:12.5%;width:8%;}.a0-1{left:12.5%;width:25%;}.a0-2{left:12.5%;width:50%;}.a0-3{left:12.5%;width:75%;}.a1-0{left:12.5%;width:25%;text-align:left;}.a1-1{left:37.5%;width:8%;}.a1-2{left:37.5%;width:25%;}.a1-3{left:37.5%;width:50%;}.a2-0{left:12.5%;width:50%;text-align:left;}.a2-1{left:37.5%;width:25%;text-align:left;}.a2-2{left:62.5%;width:8%;}.a2-3{left:62.5%;width:25%;}.a3-0{left:12.5%;width:75%;text-align:left;}.a3-1{left:37.5%;width:50%;text-align:left;}.a3-2{left:62.5%;width:25%;text-align:left;}.a3-3{left:87.5%;width:8%;}.sample-document{padding:20px;border:1px solid #dce2f0;border-radius:16px;background:#f7f9fd;margin:18px 0}.sample-document a{font-size:14px}.demo .file-actions{margin-top:10px;line-height:1.9} .app-showcase{background:linear-gradient(135deg,#f0f3fc,#f8faff 60%,#e9eefb);border-radius:36px;padding:64px;margin:52px 0;align-items:center}.app-showcase h2{max-width:600px}.app-screen{margin:0 auto;width:min(100%,282px)}.app-screen img{display:block;width:100%;height:auto;border-radius:34px;box-shadow:0 24px 50px #24365a24;border:5px solid #192031;background:#f6f7f9}.app-screen figcaption{font-size:11px;text-align:center;color:#6d778b;margin-top:18px}.app-screen-pair{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:710px;margin:44px auto 0}.section-intro{max-width:680px}.reverse>div{order:2}.reverse>figure{order:1}@media(max-width:760px){.app-showcase{padding:32px 22px;border-radius:24px}.app-screen-pair{grid-template-columns:1fr;gap:36px}.reverse>div,.reverse>figure{order:initial}.app-screen{max-width:265px}} /* iPhone 16 front: black aluminium rail, rounded glass, Dynamic Island and hardware controls. */ .iphone16{position:relative;padding:8px;border-radius:46px;background:linear-gradient(105deg,#606268,#1e2024 12%,#44464b 48%,#17191c 85%,#707278);box-shadow:inset 0 0 0 1px #898b90,inset 0 0 0 3px #292b30,0 24px 50px #24365a26;isolation:isolate}.iphone16-display{position:relative;overflow:hidden;border-radius:38px;background:#000;border:3px solid #090a0c}.app-screen .iphone16 img{width:100%;height:auto;display:block;border:0;border-radius:0;box-shadow:none}.dynamic-island{position:absolute;top:1.45%;left:50%;transform:translateX(-50%);width:27%;height:3.45%;border-radius:99px;background:#050506;box-shadow:inset 0 0 0 1px #121318;pointer-events:none}.dynamic-island:after{content:'';position:absolute;width:10px;height:10px;right:8%;top:50%;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle at 40% 35%,#183050,#0b1524 35%,#06070a 65%);opacity:.8}.device-button{position:absolute;width:3px;border-radius:2px;background:linear-gradient(90deg,#1b1d20,#75777c,#26282c);z-index:-1;left:-2px}.device-button.action{top:15%;height:3.2%}.device-button.volume-up{top:22%;height:6.3%}.device-button.volume-down{top:30%;height:6.3%}.device-button.power{left:auto;right:-2px;top:25%;height:9.5%}.device-button.camera-control{left:auto;right:-2px;top:63%;height:6.5%;background:linear-gradient(90deg,#15171a,#505259,#25272c);border:1px solid #888a90}@media(max-width:760px){.iphone16{border-radius:43px;padding:7px}.iphone16-display{border-radius:36px}} .sequence-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-gutter:stable;border:1px solid #dce2f0;border-radius:14px;background:#f7f9fd}.sequence-svg{display:block;width:100%;min-width:850px;height:auto;font-family:-apple-system,BlinkMacSystemFont,"PingFang TC",sans-serif}.diagram-tabs{position:relative;z-index:1}.diagram-panel{scroll-margin-top:130px}.sequence-scroll:focus-visible{outline:3px solid #6a79fb;outline-offset:3px} .demo .visually-hidden-input{position:absolute;width:1px;height:1px;padding:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap}.demo .file-picker{display:flex;align-items:center;gap:18px;padding:28px;border:1px dashed #a8b6e5;border-radius:20px;background:linear-gradient(135deg,#f4f6ff,#fafbff);cursor:pointer;margin-top:16px;color:#4d5fe7}.file-picker>span:nth-child(2){flex:1;min-width:0}.file-picker strong{display:block;overflow-wrap:anywhere;font-size:17px;color:#24324d}.file-picker small{display:block;margin-top:7px;font-size:13px;font-weight:400;color:#6b7890}.file-choose{padding:10px 14px;border-radius:10px;background:#e8edff;font-size:13px;white-space:nowrap}.file-picker:hover{border-color:#4d5fe7;background:#f0f3ff}.visually-hidden-input:focus-visible+.file-picker{outline:3px solid #6a79fb;outline-offset:4px}.mode-picker{display:grid;grid-template-columns:repeat(2,1fr);border:0;padding:0;gap:10px;margin:12px 0 20px}.demo .mode-picker label{margin:0;position:relative;cursor:pointer}.mode-picker input{position:absolute;opacity:0;width:1px!important}.mode-picker span{display:block;border:1px solid #dce2f0;border-radius:14px;padding:17px 12px;text-align:center;font-size:14px;background:#fff}.mode-picker small{display:block;font-size:11px;color:#718099;font-weight:400;margin-top:6px}.mode-picker input:checked+span{background:#eff2ff;border-color:#687be5;color:#3c52c8;box-shadow:inset 0 0 0 1px #687be5}.mode-picker input:focus-visible+span{outline:3px solid #6a79fb;outline-offset:3px}.demo{box-shadow:0 16px 60px #23396408}.demo input[type=checkbox]{appearance:none;width:19px;height:19px;padding:0;border-radius:5px;vertical-align:middle;margin-right:8px;cursor:pointer}.demo input[type=checkbox]:checked{background:#4d5fe7;border-color:#4d5fe7;box-shadow:inset 0 0 0 4px white}@media(max-width:520px){.demo{padding:22px}.demo .file-picker{padding:18px;flex-wrap:wrap;gap:14px;align-items:flex-start}.file-picker>span:nth-child(2){flex:1 1 auto}.file-picker strong{font-size:16px}.file-choose{flex:1 0 100%;margin-left:0;text-align:center;padding:12px}.mode-picker{gap:6px}.mode-picker span{padding:14px 6px;font-size:12px}.mode-picker small{font-size:10px}} .sequence-svg{min-width:0}@media(max-width:760px){.sequence-svg{min-width:850px}} /* 驗收頁的進度：進度條加底下的狀態文字，合成一塊獨立 UI。 */ .proof-progress{margin:18px 0;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:#f7f9fd} .progress-track{height:6px;border-radius:99px;background:#e2e8f5;overflow:hidden} .progress-fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#4d5fe7,#6a79fb);transition:width .35s ease} .progress-fill.done{background:linear-gradient(90deg,#1f9d6b,#33b981)} .progress-fill.failed{background:linear-gradient(90deg,#c0562f,#dd7a4e)} .progress-status{margin:12px 0 0;font-size:13px;line-height:1.75;color:#4a5670;white-space:pre-wrap;overflow-wrap:anywhere} @media(prefers-reduced-motion:reduce){.progress-fill{transition:none}} /* 驗收頁的 inline 精靈：步驟標頭、單一可見面板、底部導覽。 */ .demo.wizard{padding:0;overflow:hidden} .wizard-head{padding:24px 26px 20px;border-bottom:1px solid var(--line);background:#f7f9fd} .wizard-count{margin:0;font-size:12px;letter-spacing:1px;color:#7c8aa5;text-transform:uppercase} .wizard-title{margin:6px 0 16px;font-size:20px;letter-spacing:-.3px} .wizard-panel{padding:24px 26px 4px} .wizard-panel[hidden]{display:none} .wizard-summary{margin:0;display:grid;gap:14px} .wizard-summary div{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:baseline} .wizard-summary dt{margin:0;font-size:13px;color:#7c8aa5} .wizard-summary dd{margin:0;font-size:15px;color:var(--ink);overflow-wrap:anywhere} .demo.wizard .progress-status{margin:0;padding:0 26px 18px} .wizard-nav{display:flex;gap:12px;padding:0 26px 26px} .wizard-nav button{flex:1;white-space:nowrap}.wizard-nav .secondary{flex:0 0 auto;min-width:96px} .wizard-nav button[hidden]{display:none} @media(max-width:520px){ .wizard-head{padding:20px 18px 16px} .wizard-panel{padding:20px 18px 4px} .demo.wizard .progress-status{padding:0 18px 16px} .wizard-nav{padding:0 18px 20px} .wizard-summary div{grid-template-columns:1fr;gap:4px} } /* 按鈕忙碌狀態：按下去之後 disable ＋ 轉圈。reduced-motion 時改成靜止的虛線圓， 仍然看得出來它在等，只是不轉——不要讓偏好設定變成「沒有回饋」。 */ .spinner{animation:proof-spin .8s linear infinite;flex:0 0 auto} @keyframes proof-spin{to{transform:rotate(360deg)}} .is-busy{opacity:.72;cursor:progress} a.is-busy{pointer-events:none} .button[aria-busy=true],button[aria-busy=true]{cursor:progress} /* 已簽文件：內嵌檢視器，右下角是下載。 */ .signed-viewer{position:relative;margin-top:4px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#f1f4fa} /* 用 canvas 算繪，不用 ／