:root{--green:#173e36;--sage:#e5ebe3;--ivory:#faf8f3;--peach:#eda986;--muted:#69756f}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:var(--ivory);color:var(--green);font-family:"Microsoft JhengHei","PingFang TC",sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #d98c60;outline-offset:4px}header{max-width:1360px;margin:auto;min-height:96px;display:flex;align-items:center;justify-content:space-between;padding:18px 40px;gap:20px}.brand img{width:190px;height:auto;display:block}.header-actions{display:flex;gap:26px;align-items:center;font-size:14px}.share{border:1px solid var(--green);border-radius:24px;padding:12px 20px;background:var(--green);color:white}.hero{max-width:1280px;margin:0 auto 68px;border-radius:28px;overflow:hidden;background:#efeee6;box-shadow:0 20px 60px #163d3510}.hero>img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover}.hero-meta{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;gap:16px}.hero-meta>span{font-size:12px;letter-spacing:.12em;border:1px solid #d2d8cb;border-radius:20px;padding:7px 14px}.hero-meta p{font-size:14px;color:var(--muted);margin:0}.hero-meta>a{font-size:14px}.designs{max-width:1280px;margin:auto;padding:0 10px 70px}.intro{display:flex;align-items:end;justify-content:space-between;margin-bottom:30px;gap:20px}.eyebrow{font-size:11px;color:#8b987f;letter-spacing:.18em}h2{font-family:serif;font-size:32px;font-weight:600;margin:10px 0 0}.intro p{font-size:14px;color:var(--muted);margin:0;line-height:1.6}.toolbar{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:28px}.role,.devices{display:flex;gap:6px;background:#ebece5;border-radius:28px;padding:5px}.toolbar button{border:0;background:transparent;border-radius:24px;padding:12px 26px;font-size:14px}.role button.active{background:var(--green);color:white;box-shadow:0 3px 12px #173e3620}.devices button.active{background:white;box-shadow:0 2px 10px #173e3610}.workbench{display:grid;grid-template-columns:210px minmax(0,1fr);gap:28px;align-items:start}#screen-list{display:flex;flex-direction:column;gap:7px;position:sticky;top:24px}#screen-list button{border:1px solid transparent;background:transparent;border-radius:12px;text-align:left;padding:17px 16px;font-size:14px;display:flex;gap:14px;align-items:center}#screen-list button.active{border-color:#c5d4c4;background:#e8eee4}#screen-list button>span{color:#a87c5f;font-size:11px}.stage{background:white;border:1px solid #e9ede6;border-radius:22px;padding:22px;min-width:0;box-shadow:0 8px 30px #173e3605}.stage-head{display:flex;justify-content:space-between;align-items:center;padding:0 0 20px;gap:16px}#screen-count{font-size:11px;letter-spacing:.05em;color:#939d95}.stage h3{margin:6px 0 0;font-size:19px;font-weight:500}.expand{background:transparent;border:1px solid #d6dfd3;border-radius:20px;padding:9px 14px;font-size:12px;white-space:nowrap}.canvas{background:#f3f3ec;border-radius:14px;padding:24px;display:flex;justify-content:center;min-height:350px}.canvas img{display:block;width:100%;height:auto;max-width:440px;box-shadow:0 10px 34px #173e3612;border-radius:8px}.canvas img.wide{max-width:100%;}.paging{display:flex;justify-content:space-between;align-items:center;padding-top:22px;font-size:12px;color:var(--muted)}.paging button{border:0;background:transparent;padding:8px}.paging button:disabled{opacity:.35;cursor:default}footer{max-width:1280px;margin:auto;border-top:1px solid #dce2d8;padding:28px 10px 40px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12px}footer>span{font-family:serif;font-size:20px}footer p{margin:0;color:var(--muted);line-height:1.6}dialog{border:0;padding:0;background:var(--ivory);border-radius:18px;max-width:96vw;width:min(1200px,96vw);max-height:94vh;overflow:auto;color:var(--green)}dialog::backdrop{background:#102b24e8}.viewer-bar{position:sticky;top:0;z-index:1;background:var(--ivory);padding:14px 20px;border-bottom:1px solid #dbe2d7;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px}.viewer-bar>div{display:flex;align-items:center;gap:18px}.viewer-bar a{font-size:12px}.viewer-bar button{border:0;background:var(--green);color:white;padding:9px 14px;border-radius:20px}#full-image{display:block;width:auto;height:auto;max-width:100%;margin:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:1340px){.hero{margin-left:30px;margin-right:30px}.designs,footer{margin-left:30px;margin-right:30px}}@media(max-width:800px){header{padding:18px 24px;min-height:80px}.brand img{width:160px}.quiet{display:none}.hero{margin:0 20px 45px;border-radius:20px}.hero-meta{padding:16px;flex-wrap:wrap}.hero-meta p{font-size:12px}.hero-meta>a{display:none}.intro{display:block}.intro p{margin-top:14px}.designs,footer{margin-left:20px;margin-right:20px}.workbench{grid-template-columns:1fr;gap:16px}#screen-list{position:static;flex-direction:row;flex-wrap:wrap;gap:6px}#screen-list button{padding:10px 12px;font-size:12px;border-color:#dde4d7}#screen-list button span{display:none}.stage{padding:16px}.canvas{padding:16px}footer{flex-wrap:wrap}.intro h2{font-size:28px}}@media(max-width:480px){header{padding:16px 18px}.brand img{width:145px}.share{padding:10px 13px;font-size:12px}.hero{margin:0 14px 36px;border-radius:15px}.hero-meta{gap:10px}.hero-meta>span{font-size:10px;padding:6px 10px}.hero-meta p{font-size:11px}.designs,footer{margin-left:14px;margin-right:14px;padding-left:0;padding-right:0}.toolbar{align-items:start;flex-direction:column;gap:12px}.toolbar button{padding:10px 20px;font-size:13px}.devices{width:100%;justify-content:space-between}.devices button{flex:1}.stage-head{padding-bottom:16px}.stage h3{font-size:17px}.stage{padding:12px}.canvas{padding:0;background:white}.canvas img{border-radius:7px}.paging{padding-top:14px}footer>p{order:3;width:100%}.viewer-bar{padding:10px;font-size:12px;gap:6px}.viewer-bar>div{gap:10px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.demo-note{font-size:12px;line-height:1.8;color:var(--muted);margin:-10px 0 24px}.toolbar button[hidden]{display:none}@media(max-width:480px){.role{width:100%}.role button{flex:1;padding:10px 12px}}
.devices[hidden]{display:none}