/* The WinUI product chapter: scoped so the original Sylva and Sketchbook scenes stay independent. */
#clue-content{--paper:#f4f1e8;--panel:#fbfaf5;--ink:#26332c;--quiet:#68716a;--hair:#d6dace;--green:#47694c;background:var(--paper);color:var(--ink);font-family:Arial,"Microsoft YaHei",sans-serif;line-height:1.6;font-synthesis:none}
#clue-content .section-width{width:min(1360px,calc(100% - 80px));margin-inline:auto}
#clue-content h2{font-family:"Instrument Serif","Songti SC",SimSun,serif;font-size:clamp(38px,4.7vw,66px);font-weight:400;line-height:1.17;letter-spacing:-.035em}
#clue-content h2 span{color:#768073}#clue-content h3{font-weight:500}#clue-content .eyebrow{font:11px/1.5 Arial,sans-serif;letter-spacing:.13em;color:var(--quiet);margin-bottom:20px}
#clue-content button:focus-visible,#clue-content a:focus-visible,#clue-content input:focus-visible,#clue-content summary:focus-visible{outline:2px solid var(--green);outline-offset:4px}
#clue-content .experience{padding:80px 0 96px}#clue-content .chapter-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:34px;text-align:left}#clue-content .chapter-intro>p{font-size:14px;line-height:1.9;color:var(--quiet);max-width:350px;margin-bottom:4px}
#clue-content .product-wrap{max-width:none;margin:0;animation:none}#clue-content .product-frame{border:1px solid #bac3b6;border-radius:15px;background:#fff;box-shadow:0 32px 90px -50px #263f2a65,0 0 0 5px #fcfaf466;overflow:hidden}
#clue-content .frame-bar{height:42px;padding:0 15px;background:#eeeee7;border-bottom:1px solid #d6d9cf;font:11px Arial,sans-serif;color:#617063}#clue-content .frame-lights{width:auto;gap:6px}#clue-content .frame-lights i{width:7px;height:7px;background:#c1c8b9}#clue-content .frame-bar>span:nth-child(2){margin-right:auto;margin-left:16px}#clue-content .frame-bar small{font-size:10px;color:#768072;margin-left:7px}#clue-content .frame-actions{display:flex;align-items:center;gap:12px}#clue-content .frame-actions>a{font-size:11px}#clue-content .frame-actions button{font-size:20px;width:30px;height:28px;border-radius:5px}#clue-content .frame-actions button:hover{background:#dce2d5;color:#304e36}
#clue-content .product-viewport{aspect-ratio:auto;height:720px;max-height:82svh;min-height:560px;width:100%;background:#fff}#clue-content .product-viewport iframe{position:static;display:block;width:100%;height:100%;border:0;transform:none;background:white}#clue-content .preview-caption{padding:9px 15px;color:#738071;background:#fcfcf8;border-top:1px solid #e4e7de;font-size:11px}#clue-content .preview-caption button{font-size:11px;color:#53684e}#clue-content .preview-caption i{width:5px;height:5px;background:#718d58}
#clue-content .product-tabs{margin:24px 0 0;width:auto;display:flex;justify-content:center;gap:7px;background:none;border:0;padding:0;flex-wrap:wrap}#clue-content .product-tabs button{padding:9px 17px;font-size:12px;border:1px solid transparent;background:transparent;border-radius:22px;color:#697464}#clue-content .product-tabs button.selected{background:#e5eadc;border-color:#c9d3c0;color:#314a36;box-shadow:none}#clue-content .product-tabs button:hover{background:#e9ecdf;color:#304d37}
#clue-content .product-wrap.expanded{position:fixed;inset:24px;z-index:80;max-width:none;display:flex;justify-content:flex-start;padding:10px;background:#e9ebdf;border-radius:18px;box-shadow:0 0 0 100vmax #17251eea}#clue-content .product-wrap.expanded .product-frame{flex:1;min-height:0;display:flex;flex-direction:column}#clue-content .product-wrap.expanded .product-viewport{min-height:0;max-height:none;flex:1;height:auto;aspect-ratio:auto}#clue-content .product-wrap.expanded .frame-bar,#clue-content .product-wrap.expanded .preview-caption{flex-shrink:0}#clue-content .product-wrap.expanded .product-tabs{margin:10px 0 0}
#clue-content .editorial-rule{border:0;border-top:1px solid var(--hair);margin:0}#clue-content .process-section{padding:100px 0;display:grid;grid-template-columns:.8fr 1.2fr;gap:8%;align-items:center}#clue-content .section-copy>p{font-size:15px;line-height:1.9;max-width:390px;color:var(--quiet);margin-top:25px}#clue-content .process-tabs{display:flex;flex-direction:column;margin-top:34px;gap:1px;max-width:380px}#clue-content .process-tabs button{display:flex;gap:16px;align-items:center;border:0;border-bottom:1px solid var(--hair);padding:15px 0;background:none;text-align:left;color:#798073;font-size:14px}#clue-content .process-tabs button>span{font:10px monospace;color:#98a08f}#clue-content .process-tabs button>b{margin-left:auto;font-weight:400;transition:transform .2s}#clue-content .process-tabs button.active{color:#304e36}#clue-content .process-tabs button.active>b{transform:translateX(4px)}
#clue-content .process-sheet{background:var(--panel);border:1px solid #cfd5c7;border-radius:9px;box-shadow:8px 8px 0 #e7e8dc;padding:28px;min-height:350px}#clue-content .sheet-heading{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--hair);padding-bottom:17px;font-size:11px;color:#6c786a}#clue-content .sheet-heading small{font:10px monospace}#clue-content .process-sheet h3{font-size:21px;margin:24px 0 9px}#clue-content .process-sheet p{font-size:13px;color:#707a6a;line-height:1.85}#clue-content .process-lines{font:12px/1.8 Consolas,monospace;margin-top:24px;display:grid;gap:10px}#clue-content .process-line{display:flex;gap:12px;background:#f1f3e9;padding:11px 13px;border-radius:5px;color:#5d7258}#clue-content .process-line>span:last-child{margin-left:auto;font-family:Arial,"Microsoft YaHei",sans-serif;color:#7e8879;font-size:11px}#clue-content .process-sheet .sheet-note{margin-top:22px;padding-top:15px;border-top:1px solid #e0e4d6;font-size:10px;color:#939b8c}
#clue-content .smart-section{padding:100px 0;background:#e7eadf;border-block:1px solid #d4d9cb}#clue-content .smart-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:8%;align-items:center}#clue-content .smart-layout .section-copy>p{max-width:390px}#clue-content .inline-link{display:inline-flex;gap:12px;align-items:center;border:0;background:none;padding:0;font-size:12px;color:#486142;margin-top:24px}#clue-content .inline-link:hover{color:#243b29}#clue-content .smart-sample{background:#fafbf6;border:1px solid #cfd8c6;border-radius:11px;padding:26px;box-shadow:0 25px 50px -35px #3c523b66}#clue-content .sample-head{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;margin-bottom:23px}#clue-content .sample-head small{font-size:10px;color:#84917e}#clue-content .bar-rows{display:grid;gap:12px}#clue-content .bar-row{display:grid;grid-template-columns:64px 1fr 48px;gap:12px;align-items:center;font-size:11px;color:#64745e}#clue-content .bar-track{height:22px;border-radius:3px;background:repeating-linear-gradient(to right,transparent 0,transparent calc(25% - 1px),#e3e9dc calc(25% - 1px),#e3e9dc 25%)}#clue-content .bar-track i{display:block;height:100%;width:var(--bar);border-radius:3px;background:#c8d9e7;transition:background .2s,width .6s}#clue-content .bar-row:hover .bar-track i{background:#9cbdd5}#clue-content .bar-row b{font-weight:400;color:#647563}#clue-content .sample-divider{border:0;border-top:1px solid #dfe5d7;margin:26px 0 20px}#clue-content .sample-calculator{display:grid;grid-template-columns:1fr 1fr;gap:13px}#clue-content .sample-calculator label{font-size:11px;color:#73806b;display:grid;gap:7px}#clue-content .sample-calculator input{width:100%;min-width:0;border:1px solid #d7dfce;border-radius:5px;background:white;padding:9px 11px;color:#354831;font:13px Arial}#clue-content .sample-result{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid #e0e6d7;padding-top:16px;font-size:12px;color:#708067}#clue-content .sample-result strong{font-size:28px;font-weight:400;color:#354e38}#clue-content .sample-result strong small{font-size:12px;color:#87917f;margin-left:5px}#clue-content .sample-foot{font-size:10px;color:#929b8a;margin-top:16px;line-height:1.8}
#clue-content .details-section{padding:105px 0}#clue-content .capability-heading{display:flex;justify-content:space-between;gap:40px;align-items:flex-end}#clue-content .capability-heading p{font-size:14px;line-height:1.8;color:var(--quiet);max-width:360px;margin-bottom:5px}#clue-content .capability-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:48px;border-top:1px solid var(--hair);border-left:1px solid var(--hair)}#clue-content .capability{padding:30px;min-height:235px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);background:#f7f5ed;transition:background .25s}#clue-content .capability:hover{background:#fbfaf5}#clue-content .capability-num{display:block;font:10px/1 monospace;color:#929a88;margin-bottom:25px}#clue-content .capability h3{font-size:18px;color:#354635;margin-bottom:12px}#clue-content .capability p{font-size:13px;line-height:1.85;color:#77816e}#clue-content .capability .inline-link{margin-top:19px;font-size:11px}
#clue-content .engineering{padding:80px 0;background:#edeedf;border-block:1px solid #d3d8c8}#clue-content .engineering-heading{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:end}#clue-content .engineering-heading>p{color:var(--quiet);font-size:14px;line-height:1.9;margin-bottom:8px}#clue-content .architecture{margin:36px 0;background:transparent;border:1px solid #cbd3be;border-radius:8px;padding:24px;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:20px}#clue-content .architecture>div{padding:4px 9px;display:grid;gap:6px}#clue-content .architecture small{font:10px monospace;color:#8b977b}#clue-content .architecture strong{font-size:17px;font-weight:400;color:#425537}#clue-content .architecture span{font-size:11px;color:#79856b}#clue-content .architecture i{font-style:normal;color:#a0ad8c}#clue-content .release-notes{margin:0;border-top:1px solid #cbd3be;padding-top:23px;display:grid;grid-template-columns:1fr 1.4fr;gap:38px}#clue-content .release-notes h3{font-size:18px}#clue-content .release-notes p{font-size:12px;color:#77816c;line-height:1.85}#clue-content .technical-details{margin-top:26px}#clue-content .technical-details>summary{padding:16px 0;border-block:1px solid #cbd3be;font-size:13px;color:#556947;list-style:none}#clue-content .technical-details>summary span{float:right}#clue-content .technical-details[open]>summary span{transform:rotate(45deg)}#clue-content .technical-copy{padding:23px 0;display:grid;grid-template-columns:1fr 1fr;gap:25px}#clue-content .technical-copy p{font-size:12px;line-height:1.9;color:#737d68}#clue-content .technical-copy strong{display:block;font-size:13px;color:#435638;font-weight:500;margin-bottom:8px}
#clue-content .closing{padding:100px 0;display:grid;grid-template-columns:1fr auto;align-items:center;text-align:left;gap:40px}#clue-content .closing .closing-mark{display:flex;align-items:center;gap:12px;font-size:11px;color:#6d7e60;margin-bottom:22px}#clue-content .closing .closing-mark img{width:25px;height:25px}#clue-content .download-panel{min-width:270px;text-align:left;border-left:1px solid var(--hair);padding-left:36px}#clue-content .button{background:#486343;box-shadow:none;gap:26px;padding:14px 24px;font-size:13px;border-radius:28px;color:#f6f7ef}#clue-content .button:hover{background:#2d4e31;box-shadow:0 8px 20px #304b3625;transform:translateY(-2px)}#clue-content #download-status{font-size:11px;line-height:1.9;color:#89927f;margin-top:15px}#clue-content .release-link{display:block;font-size:11px;color:#5b7150;margin-top:13px}#clue-content .footer{padding:26px 0 34px;border-top:1px solid var(--hair);font-size:10px;color:#87947a;display:flex;align-items:center;gap:28px}#clue-content .footer .group{font-size:11px;letter-spacing:.08em;gap:8px;margin-right:auto;color:#66765d}#clue-content .footer>span{display:block}#clue-content .footer small{font-size:10px}#clue-content .notice{position:fixed;bottom:24px;left:50%;transform:translate(-50%,15px);background:#304c35;color:#f4f5ed;border-radius:8px;padding:10px 18px;font-size:12px;z-index:90;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}#clue-content .notice.shown{opacity:1;transform:translate(-50%,0)}
@media(min-width:1700px){#clue-content .product-viewport{height:760px}}@media(max-width:1000px){#clue-content .section-width{width:calc(100% - 48px)}#clue-content .chapter-intro>p{max-width:290px;font-size:12px}#clue-content .process-section,#clue-content .smart-layout{gap:5%}#clue-content .capability{padding:23px}#clue-content .product-viewport{height:660px;min-height:520px}#clue-content .architecture{gap:8px;padding:18px}}
@media(max-width:700px){#clue-content .section-width{width:calc(100% - 36px)}#clue-content h2{font-size:38px}#clue-content .experience{padding:60px 0}#clue-content .chapter-intro,#clue-content .capability-heading{display:block}#clue-content .chapter-intro>p,#clue-content .capability-heading>p{max-width:none;margin-top:20px;font-size:13px}#clue-content .frame-bar>span:nth-child(2){margin-left:9px;font-size:10px}#clue-content .frame-actions>a{display:none}#clue-content .product-viewport{height:660px;max-height:none;min-height:0}#clue-content .preview-caption{font-size:9px;padding-inline:9px;gap:5px}#clue-content .preview-caption button{font-size:10px;white-space:nowrap}#clue-content .product-tabs{gap:3px;margin-top:20px}#clue-content .product-tabs button{padding:8px 12px;font-size:11px}#clue-content .product-wrap.expanded{inset:8px;padding:6px}#clue-content .product-wrap.expanded .product-tabs button{padding:5px 9px}#clue-content .process-section,#clue-content .smart-layout{grid-template-columns:1fr;gap:35px}#clue-content .process-section,#clue-content .smart-section,#clue-content .details-section,#clue-content .engineering{padding-block:64px}#clue-content .process-tabs{max-width:none;flex-direction:row;margin-top:25px;gap:20px}#clue-content .process-tabs button{flex:1;gap:8px;font-size:12px}#clue-content .process-tabs button>b{display:none}#clue-content .process-sheet{padding:22px;min-height:320px}#clue-content .capability-grid{grid-template-columns:1fr 1fr;margin-top:30px}#clue-content .capability{padding:23px 18px;min-height:225px}#clue-content .capability h3{font-size:16px}#clue-content .capability p{font-size:12px}#clue-content .engineering-heading{grid-template-columns:1fr;gap:22px}#clue-content .architecture{grid-template-columns:1fr;gap:2px;margin-block:28px}#clue-content .architecture>i{transform:rotate(90deg);justify-self:start;margin-left:15px}#clue-content .architecture>div{padding:9px}#clue-content .release-notes,#clue-content .technical-copy{grid-template-columns:1fr;gap:15px}#clue-content .closing{padding-block:65px;grid-template-columns:1fr;gap:28px}#clue-content .download-panel{padding:0;border:0}#clue-content .footer{flex-wrap:wrap;gap:18px}#clue-content .footer>span{display:none}#clue-content .footer small{flex-basis:auto}}
#clue-content .engineering-heading{max-width:none}#clue-content .engineering-heading>p{margin-top:0}#clue-content .engineering h2,#clue-content .closing h2{font-weight:400}#clue-content .architecture>i{margin:0;transform:none}#clue-content .architecture strong{margin:0}#clue-content .closing .button{margin-top:0}#clue-content .footer>a:nth-last-child(2){margin-left:0}
@media(max-width:700px){#clue-content .architecture>i{transform:rotate(90deg);margin-left:15px}#clue-content .engineering h2,#clue-content .closing h2{font-size:38px}}
@media(prefers-reduced-motion:reduce){#clue-content *,#clue-content *::before,#clue-content *::after{animation:none!important;transition:none!important}}