/* bundled source: style.css */ /* Scoped independent tools experience, no shared-site stylesheet changes. */ :root{--ink:#172a47;--muted:#617187;--blue:#2456e8;--blue-soft:#edf2ff;--line:#dce3ee;--paper:#f7f9fc;--white:#fff;--radius:16px;color-scheme:light;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--paper)}*{box-sizing:border-box}body{margin:0;font-size:17px;line-height:1.75}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,pre:focus-visible,summary:focus-visible{outline:3px solid #789cff;outline-offset:3px}button:disabled{cursor:default;opacity:.45}[hidden]{display:none!important}.skip{position:fixed;top:-80px;left:18px;z-index:1000;padding:12px 24px;background:#fff;border:2px solid var(--blue)}.skip:focus{top:12px}.header{background:#fff;border-bottom:1px solid var(--line)}.nav-wrap{max-width:1224px;margin:auto;display:flex;align-items:center;gap:32px;padding:18px 28px}.brand{display:flex;align-items:center;gap:11px;font-weight:750;font-size:18px;letter-spacing:-.4px;line-height:1.3}.brand-mark{width:40px;height:40px;border-radius:12px;color:#fff;background:var(--blue);display:grid;place-items:center;font-size:22px}.brand small{display:block;font-size:12px;font-weight:450;color:var(--muted);letter-spacing:.2px;margin-top:5px}.header nav{display:flex;gap:28px;margin-left:auto;color:#617187;font-size:14px}.header nav a.current{color:var(--blue);font-weight:650}.nav-login{border:1px solid var(--line);padding:8px 16px;border-radius:9px;font-size:14px}.container{max-width:1224px;margin:auto;padding:0 28px}.hero{display:grid;grid-template-columns:1fr 340px;align-items:center;gap:72px;padding:64px 0 45px}.eyebrow{font-size:12px;font-weight:600;letter-spacing:.4px;color:var(--blue);margin:0 0 17px}.eyebrow>span{display:inline-block;width:6px;height:6px;background:var(--blue);border-radius:50%;margin-right:7px;vertical-align:middle}.hero h1{font-size:54px;line-height:1.28;letter-spacing:-2px;margin:0;font-weight:750}.hero em,.resources-hero em{color:var(--blue);font-style:normal}.hero-copy{font-size:16px;line-height:1.9;color:var(--muted);margin:22px 0}.hero-badges{display:flex;flex-wrap:wrap;gap:18px;font-size:12px;color:var(--muted)}.hero-note{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:0 10px 30px #1e3c6e05;transform:rotate(1deg)}.note-kicker{font-size:12px;color:var(--muted)}.hero-note p{margin:12px 0 18px;font-size:23px;font-weight:650}.hero-note a{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-top:1px solid #e9edf5;font-size:14px}.hero-note a span{color:var(--blue)}.note-foot{font-size:14px;color:var(--muted);margin-top:20px}.discovery{padding:0 0 29px;border-bottom:1px solid var(--line)}.search-wrap{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:0 18px;box-shadow:0 3px 10px #1e3c6e03}.search-wrap>span{font-size:28px;color:var(--blue);line-height:1}.search-wrap input{width:100%;height:56px;border:0;outline:0;background:transparent;color:var(--ink);font-size:14px}.search-wrap input:focus-visible{outline:0}.search-wrap:focus-within{outline:2px solid #789cff;outline-offset:2px}.search-wrap kbd{background:#f7f9fc;border:1px solid var(--line);border-radius:5px;padding:1px 8px;color:var(--muted);font-size:14px}.filters{display:flex;flex-wrap:wrap;gap:7px;margin-top:17px;align-items:center}.filters button{padding:7px 13px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);font-size:14px}.filters button.active{background:var(--blue);color:white}.filters button small{margin-left:4px;opacity:.65}.filters>a{margin-left:auto;color:var(--blue);font-size:14px;padding:8px 0}.section-top{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin:28px 0 18px}.section-top h2{font-size:18px;margin:0;font-weight:650;letter-spacing:-.3px}.section-top p{font-size:16px;color:var(--muted);margin:0}.tool-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.tool-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:19px;display:flex;flex-direction:column;min-height:215px;position:relative;transition:transform .15s,border-color .15s,box-shadow .15s}.tool-card:hover{border-color:#a7baf3;transform:translateY(-2px);box-shadow:0 7px 18px #1e3c6e08}.card-top{display:flex;justify-content:space-between;align-items:center}.tool-icon{display:inline-grid;place-items:center;min-width:36px;height:36px;padding:0 6px;background:var(--blue-soft);color:var(--blue);border-radius:10px;font-size:12px;font-weight:750;letter-spacing:.3px}.favorite{font-size:20px;border:0;background:none;color:#97a3b6;padding:4px;position:relative;z-index:2}.favorite[aria-pressed=true]{color:#d49a13}.card-link h3{font-size:14px;line-height:1.5;margin:13px 0 8px;font-weight:650}.card-link h3 span{float:right;color:#a0adc1;font-size:14px}.card-link:after{content:"";position:absolute;inset:0;border-radius:12px}.card-link p{font-size:16px;color:var(--muted);line-height:1.75;margin:0 0 17px}.card-bottom{display:flex;justify-content:space-between;gap:5px;align-items:center;margin-top:auto;font-size:14px;color:#8491a4}.badge{font-size:12px;background:#f2f5fa;padding:2px 6px;border-radius:4px;color:#6c7b8f;white-space:nowrap}.empty{padding:40px;text-align:center;background:#fff;border:1px dashed var(--line);border-radius:12px}.empty h3{font-size:18px}.empty p{color:var(--muted)}.empty button,.empty a{padding:9px 16px;border:1px solid var(--line);border-radius:8px;background:white;margin:6px;font-size:14px}.workflow-section{margin:53px 0}.workflow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.workflow-grid article{border-top:2px solid #bdccf5;padding:21px 0}.workflow-grid article>span{font-size:14px;color:var(--blue)}.workflow-grid h3{font-size:16px;margin:12px 0}.workflow-grid p{font-size:16px;color:var(--muted);line-height:1.9}.workflow-grid a{font-size:14px;color:var(--blue);font-weight:550}.resource-banner{display:flex;align-items:center;gap:25px;justify-content:space-between;background:#edf2ff;border:1px solid #d6e1fd;border-radius:14px;padding:30px}.resource-banner h2{font-size:24px;letter-spacing:-.8px;margin:0 0 10px}.resource-banner p:not(.eyebrow){font-size:16px;color:#52637a;margin:0}.primary-link,.primary{background:var(--blue);color:#fff;border:1px solid var(--blue);border-radius:9px;padding:11px 19px;font-size:14px;white-space:nowrap;font-weight:550}.primary:hover,.primary-link:hover{background:#1747d4}.hub-faq{margin:46px 0 58px;max-width:840px}.prose{font-size:14px;line-height:1.9;color:#526278}.prose h2{font-size:19px;color:var(--ink);line-height:1.5;margin:32px 0 14px;letter-spacing:-.4px}.prose p{margin:12px 0}.prose ol{padding-left:22px}.prose li{padding:4px 0}.prose details{border-bottom:1px solid var(--line);padding:14px 0}.prose summary{cursor:pointer;color:var(--ink);font-size:14px;font-weight:550}.prose details p{font-size:16px;padding:0 5px}.prose a{color:var(--blue);text-decoration:underline}.footer{max-width:1168px;margin:0 auto;border-top:1px solid var(--line);padding:28px 0;display:flex;gap:24px;justify-content:space-between;font-size:14px;color:var(--muted)}.brand-text{font-weight:650;color:var(--ink);font-size:14px}.footer p{font-size:16px;margin:7px 0}.footer>div:last-child{display:flex;align-items:center;gap:24px;flex-wrap:wrap}.breadcrumbs{display:flex;flex-wrap:wrap;gap:10px;font-size:14px;color:var(--muted);padding:23px 0}.breadcrumbs a{color:var(--blue)}.tool-heading{display:flex;justify-content:space-between;gap:26px;align-items:center;margin:16px 0 29px}.tool-heading .eyebrow{margin:0 0 9px}.tool-heading h1{font-size:31px;letter-spacing:-1px;line-height:1.35;margin:0 0 12px}.tool-heading p:not(.eyebrow){color:var(--muted);font-size:16px;margin:0;max-width:750px}.privacy-badge{white-space:nowrap;font-size:12px;color:#276a4b;background:#eaf7f0;padding:7px 11px;border:1px solid #d0eadc;border-radius:6px}.workspace{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;min-height:380px}.input-panel,.output-panel{min-width:0;padding:26px}.output-panel{border-left:1px solid var(--line);background:#fafbfd;display:flex;flex-direction:column;overflow:hidden}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px}.panel-title h2{font-size:14px;margin:0;font-weight:650}.text-button{color:var(--blue);background:none;border:0;padding:4px;font-size:14px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:15px}.field{min-width:0}.field.wide{grid-column:1/-1}.field label{display:block;font-size:14px;color:var(--muted);margin-bottom:7px}.field input,.field select,.field textarea{background:#fff;border:1px solid #cfd8e7;border-radius:7px;width:100%;padding:10px 11px;font-size:14px;color:var(--ink)}.field input[type=file]{font-size:14px;padding:8px}.field input[type=number]{font-variant-numeric:tabular-nums}.field textarea{resize:vertical;line-height:1.65;min-height:128px;font-family:"SFMono-Regular",Consolas,monospace}.form-actions{display:flex;gap:10px;margin-top:22px}.secondary{border:1px solid var(--line);background:#fff;border-radius:8px;color:var(--muted);padding:9px 17px;font-size:14px}.input-note{font-size:14px;color:#8693a7;line-height:1.6;margin:17px 0 0}.output-actions{display:flex;gap:7px}.output-actions button{background:#fff;border:1px solid var(--line);border-radius:6px;font-size:14px;padding:5px 9px;color:var(--muted)}.status{margin:0 0 15px;font-size:14px;color:var(--muted);overflow-wrap:anywhere}.status.error{color:#b83737;background:#fff0f0;padding:10px;border-radius:6px}.status.success{color:#26704d}.result-empty{display:flex;flex:1;justify-content:center;align-items:center;flex-direction:column;min-height:220px;color:#8593a8}.result-empty>span{font-size:25px;color:#acbddb;background:#eef2f9;width:50px;height:50px;border-radius:50%;display:grid;place-items:center}.result-empty p{font-size:16px;margin:13px 0 4px}.result-empty small{font-size:14px}.output-panel pre{margin:0;border:1px solid #dce4f0;background:white;border-radius:8px;padding:15px;font:14px/1.85 "SFMono-Regular",Consolas,monospace;max-height:520px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2}.preview{border:1px solid var(--line);background:white;border-radius:8px;padding:16px;margin-bottom:14px;font-size:14px;overflow:auto;overflow-wrap:anywhere;max-height:500px}.preview img{display:block;max-width:100%;max-height:420px;margin:auto;object-fit:contain}.preview .serp-url{color:#617187;font-size:14px}.preview .serp-title{color:#1a0dab;font-size:19px;margin:8px 0}.preview .serp-description{color:#4d5156;line-height:1.5;font-size:14px}.preview pre{font-size:14px}.preview a{color:var(--blue);text-decoration:underline}.preview ul{padding-left:20px}.preview h1{font-size:24px}.preview h2{font-size:20px}.preview h3{font-size:17px}.guide-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:80px;margin:22px 0 60px}.related{margin-top:32px}.related h2{font-size:14px;margin:0 0 12px}.related>a{display:flex;align-items:center;justify-content:space-between;font-size:14px;padding:13px 0;border-bottom:1px solid var(--line);gap:10px}.related>a span{color:var(--blue)}.aside-note{margin-top:24px;padding:17px;border:1px solid var(--line);border-radius:9px;background:white;font-size:14px}.aside-note strong{font-weight:600}.aside-note p{margin:9px 0 0;color:var(--muted)}.resources-hero{padding:22px 0 30px;max-width:840px}.resources-hero h1{font-size:36px;line-height:1.4;letter-spacing:-1px;margin:0 0 17px}.resources-hero p:not(.eyebrow){font-size:16px;color:var(--muted)}.resources-hero .resource-disclosure{font-size:14px!important}.external-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.external-card{background:white;border:1px solid var(--line);border-radius:12px;padding:24px;min-width:0}.external-card .eyebrow{font-size:12px}.external-card h2{font-size:18px;margin:9px 0 12px}.external-card h2 a{color:var(--ink)}.external-card h2 a:hover{color:var(--blue)}.external-card p{color:var(--muted);font-size:16px;line-height:1.8}.external-card .badge{display:inline-block;margin-top:9px}.source-note{margin:38px 0 60px;max-width:860px}.bulk-actions{display:flex;flex-direction:column;gap:10px}.bulk-actions a{overflow-wrap:anywhere}.legacy-help{border:1px solid #d6e1fd;border-radius:12px;background:#edf2ff;padding:22px;margin:30px 0;font-size:14px}.legacy-help a{color:var(--blue);margin-right:15px}.legacy-help h2{font-size:18px}.legacy-page main,.legacy-page .container{max-width:1168px}.legacy-page input,.legacy-page textarea,.legacy-page select{max-width:100%}.legacy-page textarea{min-height:150px}.legacy-page img{max-width:100%;height:auto} .input-note,.card-bottom,.result-empty,.badge{color:#56677f}.badge{background:#f2f5fa}.favorite{color:#617187}.hero{padding:32px 0 28px}.hero h1{font-size:48px}.hero-copy{margin:16px 0}.hero-note{padding:23px}.hero-note p{margin:8px 0 13px;font-size:21px}.hero-note a{padding:9px 0}.note-foot{margin-top:14px}.tool-card p{font-size:16px}.card-bottom,.badge{font-size:12px}.field label{font-size:14px}.input-note{font-size:14px} @media(max-width:1080px){.hero{grid-template-columns:1fr 290px;gap:35px}.hero h1{font-size:46px}.tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hero-badges{gap:10px}.guide-layout{gap:35px;grid-template-columns:minmax(0,1fr) 230px}.tool-heading{align-items:flex-start}.privacy-badge{font-size:12px}.footer{margin:0 28px}}@media(max-width:760px){.nav-wrap{padding:14px 20px;gap:16px}.brand{font-size:16px}.brand-mark{width:34px;height:34px;font-size:20px}.brand small{font-size:12px}.header nav{gap:12px;font-size:14px}.header nav a:not(.current){display:none}.nav-login{font-size:14px;padding:6px 10px}.container{padding:0 20px}.hero{grid-template-columns:1fr;gap:20px;padding:28px 0 25px}.hero h1{font-size:39px;letter-spacing:-1.8px}.hero-copy{font-size:14px;margin:15px 0}.hero-badges{font-size:12px;gap:8px 14px}.hero-note{padding:16px;transform:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 20px}.hero-note p{font-size:18px;margin:3px 0}.note-kicker{align-self:center;font-size:12px}.hero-note a{font-size:14px}.hero-note .note-foot{font-size:14px;margin:0;grid-column:1/-1}.search-wrap input{font-size:14px;height:49px}.search-wrap{padding:0 13px;gap:8px}.search-wrap kbd{display:none}.filters{gap:5px}.filters button{font-size:14px;padding:6px 9px}.filters>a{margin-left:0;font-size:14px}.section-top{margin:24px 0 15px}.section-top h2{font-size:16px}.section-top p{font-size:16px}.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tool-card{padding:14px;min-height:238px}.tool-icon{min-width:30px;height:30px;font-size:12px}.card-link h3{font-size:14px;margin:10px 0 7px}.card-link h3 span{display:none}.card-link p{font-size:16px;line-height:1.7}.card-bottom{font-size:14px;align-items:flex-start;flex-direction:column;gap:6px}.badge{font-size:12px}.workflow-section{margin:34px 0}.workflow-grid{grid-template-columns:1fr;gap:8px}.workflow-grid article{padding:15px 0}.workflow-grid h3{font-size:16px}.resource-banner{padding:22px;align-items:flex-start;flex-direction:column}.resource-banner h2{font-size:20px}.resource-banner .primary-link{font-size:14px}.prose{font-size:14px}.prose h2{font-size:18px}.prose summary{font-size:14px}.hub-faq{margin:34px 0 44px}.footer{margin:0 20px;flex-direction:column;padding:23px 0;gap:16px}.footer>div:last-child{gap:19px;font-size:14px}.tool-heading{flex-direction:column;gap:15px;margin:7px 0 24px}.tool-heading h1{font-size:27px}.tool-heading p:not(.eyebrow){font-size:16px}.privacy-badge{font-size:12px}.workspace{grid-template-columns:1fr}.input-panel,.output-panel{padding:20px}.output-panel{border-left:0;border-top:1px solid var(--line);min-height:280px}.fields{gap:14px 12px}.field label{font-size:14px}.field input,.field select,.field textarea{font-size:16px;padding:9px}.field input[type=file]{font-size:14px}.field textarea{font-size:14px}.output-panel pre{font-size:14px}.guide-layout{grid-template-columns:1fr;gap:7px;margin-bottom:38px}.related{margin-top:17px}.related h2{font-size:16px}.resources-hero h1{font-size:28px}.external-grid{grid-template-columns:1fr 1fr;gap:11px}.external-card{padding:16px}.external-card h2{font-size:16px;overflow-wrap:anywhere}.external-card p{font-size:16px}.external-card .eyebrow{font-size:12px}.breadcrumbs{font-size:14px;gap:7px}.empty{padding:25px 15px}}@media(max-width:360px){.tool-grid,.external-grid{grid-template-columns:1fr}.hero h1{font-size:37px}.fields{grid-template-columns:1fr}.header nav{display:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.tool-card:hover{transform:none}} .tool-search-guide{max-width:84ch;margin:36px auto 24px;padding:28px;border:1px solid var(--line,#dbe3ec);border-radius:18px;background:var(--white,#fff);font-size:16px;line-height:1.85}.tool-search-guide>h2{font-size:clamp(21px,2.2vw,28px);line-height:1.4;margin-top:0}.tool-search-guide details{padding:13px 0;border-bottom:1px solid var(--line,#dbe3ec)}.tool-search-guide details:last-child{border-bottom:0}.tool-search-guide summary{font-weight:650;cursor:pointer;min-height:30px}.tool-search-guide p{margin:10px 0 2px}.diagnostic-consolidation{border:1px solid var(--line,#dbe3ec);border-left:4px solid #3b7d66;border-radius:12px;padding:18px;margin:16px 0 24px;line-height:1.7}.diagnostic-consolidation a{font-weight:650}.diagnostic-consolidation p{margin:6px 0 0}@media(max-width:600px){.tool-search-guide{padding:20px;margin-top:24px}} /* Let guide content and long directory labels shrink within the existing grid. */ .guide-layout>.prose{min-width:0} .external-card .badge{max-width:100%;white-space:normal;overflow-wrap:anywhere} /* Stock Cutting & Sheet Nesting Visual Previews */ .xrt-plan{display:grid;gap:14px;margin-bottom:16px} .xrt-plan-summary{display:flex;flex-wrap:wrap;gap:14px;padding:12px 16px;background:var(--blue-soft,#edf2ff);border:1px solid #d6e1fd;border-radius:10px;font-size:14px;color:var(--ink)} .xrt-plan-summary strong{color:var(--blue,#2456e8)} .xrt-stock{padding:14px;border:1px solid var(--line,#dce3ee);border-radius:12px;background:#fff} .xrt-stock__head{display:flex;justify-content:space-between;gap:12px;margin-bottom:9px;font-size:13px;flex-wrap:wrap} .xrt-stock__head strong{color:var(--ink);font-weight:700} .xrt-stock__head span{color:var(--muted)} .xrt-stock__bar{display:flex;min-height:42px;overflow:hidden;border:2px solid #334157;border-radius:8px;background:repeating-linear-gradient(135deg,#eef1f5,#eef1f5 8px,#e2e7ed 8px,#e2e7ed 16px);position:relative} .xrt-stock__piece{display:grid;min-width:3px;place-items:center;overflow:hidden;border-right:2px solid #fff;color:#fff;font-size:12px;font-weight:750;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.35);padding:0 4px;transition:filter .15s} .xrt-stock__piece:hover{filter:brightness(1.1)} .xrt-stock__cuts{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.55} .xrt-plate-plan{display:grid;gap:20px;margin-bottom:16px} .xrt-plate-sheet{padding:16px;border:1px solid var(--line,#dce3ee);border-radius:14px;background:#fff} .xrt-plate-map{margin:0;padding:12px;border-radius:10px;background:#f3f5f7;border:1px solid #e2e8f0;overflow:hidden} .xrt-plate-map svg{display:block;width:100%;height:auto;max-height:560px} .xrt-plate-parts{display:grid;gap:6px;margin:12px 0 0;padding:0;list-style:none;color:var(--muted);font-size:13px;line-height:1.5;max-height:280px;overflow-y:auto} .xrt-plate-parts li{display:flex;gap:8px;align-items:flex-start} .xrt-plate-parts__swatch{flex:0 0 12px;width:12px;height:12px;margin-top:3px;border-radius:3px;border:1px solid rgba(0,0,0,.1)} @media (max-width:600px){.xrt-stock__bar{min-height:36px}.xrt-stock__piece{font-size:12px;padding:0 2px}.xrt-plate-sheet{padding:12px}.xrt-plate-map{padding:6px}} /* bundled source: workspace.css */ /* Common input and structured output enhancements. */ .workspace{align-items:start;overflow:visible}.workspace .input-panel{border-radius:13px 0 0 13px}.workspace .output-panel{border-radius:0 13px 13px 0;min-height:380px}.fields .field-group{grid-column:1/-1;border:1px solid #e1e7f0;border-radius:9px;margin:0;padding:15px;display:block;background:#fcfdff;min-width:0}.field-group legend{font-size:14px;font-weight:650;color:#425873;padding:0 6px}.field-help{font-size:14px;line-height:1.7;color:#7c8b9f;margin:6px 0 0;overflow-wrap:anywhere}.status.warning{color:#996b12;background:#fff8e8;border:1px solid #f1dfb4;padding:10px;border-radius:7px}.ws-input-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-3px 0 18px;padding:0 0 12px;border-bottom:1px solid #e6ebf3}.ws-input-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.ws-input-toolbar button,.ws-section-heading button,.ws-data-actions button,.ws-result-tabs button,.ws-dialog button{font:inherit;font-size:14px;line-height:1.4;min-height:31px;padding:6px 10px;background:white;border:1px solid #d5dfee;color:#435975;border-radius:6px}.ws-input-toolbar button:hover,.ws-section-heading button:hover,.ws-data-actions button:hover,.ws-result-tabs button:hover,.ws-dialog button:hover{color:#2456e8;border-color:#9ab4f2;background:#f5f8ff}.ws-live-toggle{display:flex;align-items:center;gap:4px;font-size:14px;color:#617187;cursor:pointer;white-space:nowrap}.ws-live-toggle input{width:12px;height:12px;accent-color:#2456e8;margin:0}.ws-import-target select{font-size:14px;max-width:170px;border:1px solid #d5dfee;color:#435975;border-radius:5px;padding:6px 7px;background:white;min-height:31px}.ws-keyboard-hint{font-size:14px;white-space:nowrap;color:#8794a7;margin-left:auto}.ws-input-counter{font-size:14px;color:#8794a7;text-align:right;margin:5px 1px 0;font-variant-numeric:tabular-nums}.ws-file-drag{outline:2px dashed #2456e8;outline-offset:6px;border-radius:7px;background:#f3f7ff}.ws-result-tabs{display:flex;gap:3px;align-items:center;border:1px solid #dce3ee;border-radius:7px;padding:3px;margin:0 0 14px;background:#f0f4fa;align-self:flex-start}.ws-result-tabs button{border-color:transparent;min-height:29px;background:transparent;color:#6b7d95;padding:5px 13px}.ws-result-tabs button[aria-pressed=true]{background:white;color:#2456e8;font-weight:650;border-color:#dce3ee;box-shadow:0 1px 3px #20385c08}.ws-result-overview{width:100%;min-width:0;overflow-wrap:anywhere}.ws-metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:16px}.ws-metric{padding:13px 14px;background:white;border:1px solid #dce3ee;border-radius:9px;min-width:0}.ws-metric-label{display:block;font-size:14px;color:#70819a;margin:0 0 5px;line-height:1.5}.ws-metric-value{font-size:23px;line-height:1.35;color:#203853;font-weight:650;letter-spacing:-.55px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;word-break:break-word}.ws-metric-value small{font-size:14px;color:#7b8ba0;font-weight:450;letter-spacing:0;margin-left:5px;white-space:normal}.ws-metric[data-tone=positive],.ws-metric[data-tone=success],.ws-metric[data-tone=good]{border-color:#cee7d9;background:#fbfffc}.ws-metric[data-tone=positive] .ws-metric-value,.ws-metric[data-tone=success] .ws-metric-value,.ws-metric[data-tone=good] .ws-metric-value{color:#24764e}.ws-metric[data-tone=warning]{border-color:#ecdfbf;background:#fffdf6}.ws-metric[data-tone=warning] .ws-metric-value{color:#9b741e}.ws-metric[data-tone=danger],.ws-metric[data-tone=negative],.ws-metric[data-tone=error]{border-color:#eccccc;background:#fffafa}.ws-metric[data-tone=danger] .ws-metric-value,.ws-metric[data-tone=negative] .ws-metric-value,.ws-metric[data-tone=error] .ws-metric-value{color:#b44242}.ws-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 11px}.ws-section-heading h3,.ws-bars h3{font-size:14px;font-weight:650;color:#344b68;margin:0;line-height:1.6}.ws-table-section{padding:16px 0;border-top:1px solid #dce3ee;margin:4px 0 0;min-width:0}.ws-table-exports{display:flex;gap:5px;align-items:center;flex-shrink:0}.ws-table-exports button{font-size:14px;padding:5px 7px;min-height:27px}.ws-table-search{display:block;width:100%;min-width:0;background:white;border:1px solid #d5dfee;border-radius:6px;padding:8px 10px;font-size:14px;color:#253d5b}.ws-table-search:focus-visible{outline:2px solid #7b9ef1;outline-offset:2px}.ws-table-count{font-size:14px;color:#7b8ba0;margin:8px 0 11px;font-variant-numeric:tabular-nums;line-height:1.6}.ws-table-scroll{overflow:auto;max-height:340px;border:1px solid #dce3ee;border-radius:7px;background:white;scrollbar-width:thin;overscroll-behavior:contain}.ws-table-scroll table{border-collapse:separate;border-spacing:0;width:100%;font-size:14px;color:#425873;line-height:1.65}.ws-table-scroll th,.ws-table-scroll td{padding:9px 10px;text-align:left;border-bottom:1px solid #e6ebf3;min-width:95px;max-width:330px;overflow-wrap:anywhere;vertical-align:top}.ws-table-scroll th{position:sticky;top:0;background:#eef3fa;color:#435b7a;font-size:14px;font-weight:650;white-space:nowrap;z-index:1}.ws-table-scroll th+th,.ws-table-scroll td+td{border-left:1px solid #f0f3f8}.ws-table-scroll tr:last-child td{border-bottom:0}.ws-table-scroll tr:nth-child(even){background:#fafcfe}.ws-table-scroll tbody tr:hover{background:#f3f7ff}.ws-table-scroll .ws-no-rows{text-align:center;color:#8997aa;padding:25px}.ws-csv-note{font-size:14px;color:#8b97a9;line-height:1.6;margin:9px 0 0}.ws-bars{padding:14px;background:white;border:1px solid #dce3ee;border-radius:9px;margin:5px 0 16px}.ws-bars h3{margin-bottom:12px}.ws-bar-row{display:grid;grid-template-columns:110px minmax(20px,1fr) minmax(40px,max-content);align-items:center;gap:10px;margin:9px 0;font-size:14px}.ws-bar-label{color:#6b7f99;font-size:14px;line-height:1.5;overflow-wrap:anywhere}.ws-bar-track{display:block;height:7px;background:#eef2f8;border-radius:4px;overflow:hidden}.ws-bar-fill{display:block;height:100%;background:#668ef0;border-radius:4px}.ws-bar-fill.ws-bar-negative{background:#d67777}.ws-bar-number{text-align:right;font-variant-numeric:tabular-nums;color:#425873;font-size:14px}.ws-chart-note{font-size:14px;line-height:1.6;color:#8392a6;margin:10px 0 0}.ws-result-notes{list-style:none;margin:9px 0 14px;padding:12px 14px;border:1px solid #dce3ee;background:#f2f6fd;border-radius:8px;font-size:14px;line-height:1.8;color:#60738e}.ws-result-notes li{margin:4px 0;padding-left:13px;position:relative;overflow-wrap:anywhere}.ws-result-notes li::before{content:"·";position:absolute;left:0;color:#849fcf;font-weight:650}.ws-data-section{margin:14px 0 2px;border-top:1px solid #dce3ee;padding:13px 0 0}.ws-data-section summary{cursor:pointer;font-size:14px;color:#526c8b;line-height:1.6}.ws-data-actions{display:flex;justify-content:flex-end;margin:10px 0 7px}.ws-data-actions button{font-size:14px;min-height:28px}.output-panel .ws-data-json{max-height:280px;white-space:pre;font-size:14px;line-height:1.7;background:#fff}.ws-result-note{color:#8b6b28;font-size:14px;line-height:1.8}.ws-dialog{border:1px solid #dce3ee;border-radius:13px;padding:24px;max-width:460px;width:calc(100vw - 36px);color:#172a47;background:#fff;box-shadow:0 18px 70px #132c4e28}.ws-dialog::backdrop{background:#172b4580}.ws-dialog h2{margin:0 0 12px;font-size:19px;line-height:1.5;letter-spacing:-.3px}.ws-dialog p{font-size:16px;color:#63738a;line-height:1.85;margin:0 0 18px;overflow-wrap:anywhere}.ws-dialog-actions{display:flex;justify-content:flex-end;gap:9px}.ws-dialog .ws-confirm-action{color:white;background:#2456e8;border-color:#2456e8}.ws-dialog .ws-confirm-action:hover{background:#1747d4;color:white}.ws-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @media(min-width:1000px){.workspace .output-panel{position:sticky;top:18px;max-height:calc(100vh - 36px);overflow:auto;scrollbar-width:thin;overscroll-behavior:contain}} @media(max-width:1080px){.ws-keyboard-hint{margin-left:0;font-size:14px}.ws-bar-row{grid-template-columns:92px minmax(20px,1fr) minmax(35px,max-content);gap:8px}.ws-metric-value{font-size:21px}} @media(max-width:760px){.workspace .input-panel{border-radius:13px 13px 0 0}.workspace .output-panel{border-radius:0 0 13px 13px;position:static;max-height:none;overflow:hidden;min-height:300px}.fields .field-group{padding:13px;gap:14px 12px}.field-group legend{font-size:14px}.field-help{font-size:14px;line-height:1.6}.ws-input-toolbar{margin:0 0 18px;gap:9px;align-items:flex-start}.ws-input-actions{gap:10px}.ws-input-toolbar button{font-size:14px;min-height:33px}.ws-live-toggle{font-size:14px;min-height:33px}.ws-keyboard-hint{font-size:14px;line-height:1.7}.ws-input-counter{font-size:14px;margin-top:6px}.ws-import-target select{font-size:14px;max-width:165px}.ws-metric-grid{gap:9px}.ws-metric{padding:13px}.ws-metric-label{font-size:14px}.ws-metric-value{font-size:24px}.ws-metric-value small{font-size:14px}.ws-result-tabs button{font-size:14px;min-height:31px}.ws-section-heading h3,.ws-bars h3{font-size:14px}.ws-table-exports button{font-size:14px;min-height:30px}.ws-table-search{font-size:14px;min-height:39px}.ws-table-count{font-size:14px;line-height:1.6}.ws-table-scroll table{font-size:14px}.ws-table-scroll th{font-size:14px}.ws-table-scroll th,.ws-table-scroll td{padding:9px;min-width:90px}.ws-table-scroll{max-height:360px}.ws-csv-note{font-size:14px}.ws-bars{padding:13px}.ws-bar-row{grid-template-columns:95px minmax(20px,1fr) minmax(40px,max-content);gap:8px}.ws-bar-label,.ws-bar-number{font-size:14px}.ws-chart-note{font-size:14px}.ws-result-notes{font-size:14px;line-height:1.85}.ws-data-section summary{font-size:14px}.ws-data-actions button{font-size:14px}.output-panel .ws-data-json{font-size:14px}.ws-dialog button{font-size:14px;min-height:35px}} @media(max-width:360px){.fields .field-group{grid-template-columns:1fr}.ws-metric-grid{grid-template-columns:1fr}.ws-section-heading{align-items:flex-start;flex-direction:column;gap:8px}.ws-bar-row{grid-template-columns:80px minmax(15px,1fr) minmax(35px,max-content);gap:7px}} /* Discover evidence is scoped separately from the general SEO observations. */ .discover-report{border:1px solid #d6e2f4;border-radius:12px;background:#fff;padding:19px;margin:0 0 20px;min-width:0;overflow-wrap:anywhere}.discover-heading{margin-bottom:11px}.discover-kicker{display:block;font-size:12px;letter-spacing:1px;color:#617dba;margin-bottom:5px}.discover-heading h3{font-size:19px;line-height:1.5;letter-spacing:-.3px;margin:0;color:#213c64}.discover-limit{font-size:14px;line-height:1.8;color:#63738b;margin:0 0 16px}.discover-counts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.discover-count{background:#f5f8fc;border-radius:7px;padding:10px 8px;min-width:0}.discover-count strong{display:block;font-size:23px;font-variant-numeric:tabular-nums;color:#2d486d}.discover-count span{font-size:14px;line-height:1.5;color:#6b7c95}.discover-count[data-tone=error] strong{color:#ac4141}.discover-count[data-tone=warning] strong{color:#936716}.discover-count[data-tone=pass] strong{color:#227653}.discover-filters{display:flex;gap:5px;flex-wrap:wrap;margin:19px 0 10px}.discover-filters button{min-height:32px;font:inherit;font-size:14px;border:1px solid #d9e2ee;background:#fff;border-radius:6px;color:#657b99;padding:6px 10px}.discover-filters button[aria-pressed=true]{background:#edf3ff;border-color:#9fb8ec;color:#2456e8;font-weight:650}.discover-filters button:focus-visible,.discover-check summary:focus-visible,.discover-report a:focus-visible{outline:2px solid #668ef0;outline-offset:3px}.discover-check{padding:12px 0;border-top:1px solid #e6ecf5;font-size:14px;line-height:1.8}.discover-check summary{display:flex;align-items:baseline;gap:9px;cursor:pointer;list-style:none}.discover-check summary::after{content:'+';margin-left:auto;color:#7891b1;font-size:17px}.discover-check[open] summary::after{content:'−'}.discover-check summary strong{font-size:14px;line-height:1.6;color:#344d70}.discover-severity{font-size:14px;white-space:nowrap;border-radius:4px;padding:1px 6px;background:#f0f4fb;color:#607999}.discover-check[data-severity=error] .discover-severity{color:#a84242;background:#fff0f0}.discover-check[data-severity=warning] .discover-severity{color:#8d6725;background:#fff6df}.discover-check[data-severity=pass] .discover-severity{color:#21724c;background:#ecf8f0}.discover-actual{color:#415978;margin:9px 0 4px}.discover-advice{color:#7a889c;margin:4px 0}.discover-no-issues,.discover-image-empty{font-size:14px;line-height:1.8;color:#6a7b94}.discover-report h4{font-size:14px;color:#344d70;border-top:1px solid #e6ecf5;margin:18px 0 12px;padding-top:17px}.discover-images{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.discover-image{padding:13px;background:#f8faff;border:1px solid #dce5f3;border-radius:8px;min-width:0}.discover-image-top{display:flex;align-items:baseline;gap:8px;justify-content:space-between}.discover-image-top strong{font-size:14px;color:#344d70}.discover-image-top span{font-size:14px;color:#6b85a8}.discover-source{font-size:14px;color:#788aa4;line-height:1.6;margin:5px 0 12px}.discover-dimensions{font-size:19px;font-weight:650;letter-spacing:-.3px;color:#254572;line-height:1.5;font-variant-numeric:tabular-nums;margin:7px 0}.discover-image-stats{font-size:14px;color:#7185a2;line-height:1.7;margin:0 0 10px}.discover-image-note,.discover-evidence{font-size:14px;color:#6b7d97;line-height:1.8;margin:7px 0}.discover-image-link,.discover-image-url{display:block;font-size:14px;line-height:1.7;overflow-wrap:anywhere;margin-top:10px}.discover-image-link{color:#3564b4;text-decoration:underline;text-underline-offset:3px}.discover-image-url{color:#8d6d52}.discover-scope{font-size:14px;line-height:1.8;color:#8290a4;margin:15px 0 9px}.discover-official{font-size:14px;color:#3564b4;text-decoration:underline;text-underline-offset:3px} @media(min-width:1000px){.discover-workspace{grid-template-columns:minmax(270px,.85fr) minmax(0,1.6fr)}.discover-workspace .output-panel{position:static;max-height:none;overflow:visible}.discover-workspace .input-panel{position:sticky;top:18px}} @media(max-width:760px){.discover-report{padding:15px}.discover-heading h3{font-size:19px}.discover-counts{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.discover-count{padding:11px 12px}.discover-count span{font-size:14px}.discover-check summary strong{font-size:14px}.discover-severity{font-size:14px}.discover-image-top strong,.discover-image-note,.discover-evidence,.discover-scope,.discover-official{font-size:14px}.discover-images{grid-template-columns:1fr}.discover-image-link,.discover-image-url{font-size:14px}.discover-filters button{font-size:14px;min-height:37px}} .discover-workspace .fields{grid-template-columns:1fr}.discover-seo-heading{font-size:14px;color:#344d70;margin:20px 0 13px} /* AI workflow visual illustrations */ .ai-visual-shell{position:relative;isolation:isolate;overflow:hidden;margin:0 0 16px;padding:6px 0 12px;border-radius:14px;background:radial-gradient(ellipse at center,#edf1ff 0%,#f7faff 48%,#fff 76%);width:100%;max-width:540px} .ai-visual-shell img{display:block;width:100%;height:auto;max-height:240px;object-fit:contain;aspect-ratio:760/460;transition:transform 250ms ease-out} .ai-visual-shell figcaption{font-size:13px;line-height:1.6;text-align:center;color:#627793;margin-top:4px} @media(hover:hover) and (pointer:fine){.ai-visual-shell:hover img{transform:translateY(-3px)}} .ai-visual-signal{position:absolute;left:42%;top:43%;height:8px;width:8px;background:#42b9a8;border:3px solid #d1fff5;border-radius:50%;box-shadow:0 0 15px #47bda966;opacity:0;pointer-events:none;animation:ai-signal 1.4s ease-out 3} @keyframes ai-signal{0%{opacity:0;transform:translate(-28px,7px)}25%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translate(28px,-7px)}} @media(max-width:760px){.ai-visual-shell img{max-height:190px}} @media(prefers-reduced-motion:reduce){.ai-visual-shell img{transition:none!important}.ai-visual-signal{animation:none!important;display:none}.ai-visual-shell:hover img{transform:none}} @media print{.ai-visual-shell{display:none!important}} .ws-next-steps{margin:18px 0 10px;padding:16px 18px;border:1px solid #dce3ee;border-radius:10px;background:linear-gradient(135deg,#f8faff 0%,#f1f5fd 100%)}.ws-next-steps-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.ws-next-steps-head h3{font-size:14px;font-weight:650;color:#244778;margin:0}.ws-next-steps-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ws-next-step-card{display:flex;flex-direction:column;padding:12px 14px;background:#fff;border:1px solid #d5e0f2;border-radius:8px;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}.ws-next-step-card:hover{border-color:#2456e8;box-shadow:0 4px 12px #1e3c6e12;transform:translateY(-1px)}.ws-next-step-card strong{font-size:13px;color:#2456e8;line-height:1.4;margin-bottom:4px;display:flex;align-items:center;justify-content:space-between}.ws-next-step-card span{font-size:12px;color:#61728a;line-height:1.5}@media(max-width:760px){.ws-next-steps-grid{grid-template-columns:1fr}} /* AIOS-0274: Calculation URL sharing and result feedback button */ .ws-result-tabs .ws-share-button{margin-left:auto;font-size:13px;padding:4px 10px;border-radius:5px;border:1px solid #c9d7ec;background:#fff;color:#2c4b78;cursor:pointer;transition:all .15s} .ws-result-tabs .ws-share-button:hover{border-color:#2456e8;color:#2456e8;background:#f2f6ff} html[data-xunl-theme="dark"] .ws-result-tabs .ws-share-button{background:#1a273b;border-color:#2c4161;color:#b6cced} html[data-xunl-theme="dark"] .ws-result-tabs .ws-share-button:hover{border-color:#5c8df5;color:#fff;background:#243652} /* bundled source: preferences-core.css */ @media screen{ /* Shared tools preferences. Generated by build_theme.py; source controls below. */ .xunl-preferences{display:flex;align-items:center;gap:8px;flex-shrink:0;font-size:14px}.xunl-preferences a,.xunl-preferences select{border:1px solid var(--line);background:var(--white);color:var(--ink);border-radius:8px;min-height:44px;padding:7px 9px;font:inherit}.xunl-preferences a:hover{border-color:var(--blue)}.xunl-preferences a:focus-visible,.xunl-preferences select:focus-visible{outline:3px solid #799eff;outline-offset:3px}.xunl-preferences select{max-width:135px}.xunl-preferences label{display:flex;align-items:center;gap:5px}.xunl-preferences .xunl-preference-label{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}.nav-wrap{flex-wrap:wrap}.header nav{min-width:0}.xunl-preferences select option{background:var(--white);color:var(--ink)} .form-actions{flex-wrap:wrap;min-width:0}.form-actions>button{max-width:100%;white-space:normal;overflow-wrap:anywhere}.form-actions>button.primary{flex-shrink:1} .cm-content .tok-comment{color:#586d76;font-style:italic}.cm-content .tok-keyword,.cm-content .tok-modifier,.cm-content .tok-namespace{color:#74388d}.cm-content .tok-string,.cm-content .tok-string2{color:#a32434}.cm-content .tok-number,.cm-content .tok-bool,.cm-content .tok-atom{color:#176545}.cm-content .tok-propertyName,.cm-content .tok-attributeName{color:#204b8a}.cm-content .tok-typeName,.cm-content .tok-className,.cm-content .tok-labelName{color:#633d92}.cm-content .tok-meta,.cm-content .tok-operator{color:#596372}.cm-content .tok-invalid,.cm-content .tok-deleted{color:#bd253d}.cm-content .tok-inserted{color:#136442}.cm-content .tok-heading{color:#254da0;font-weight:700}.cm-content .tok-strong{font-weight:700}.cm-content .tok-emphasis{font-style:italic}.cm-content .tok-link,.cm-content .tok-url{color:#254da0;text-decoration:underline} html[data-xunl-theme="dark"]{--ink:#e5edf9;--muted:#adbad0;--blue-soft:#1b2c4a;--line:#34445e;--paper:#0b1220;--white:#131e30;color-scheme:dark;color:var(--ink);background:var(--paper)} html[data-xunl-theme="dark"] .xunl-preferences :is(a,select){background:#131e30;color:#e5edf9;border-color:#34445e} html[data-xunl-theme="dark"] :is(.header nav a.current,.eyebrow,.prose a,.breadcrumbs a,.catalog-secondary-link,.catalog-primary,.catalog-quicklinks a,.catalog-members a){color:#a5bdff} html[data-xunl-theme="dark"] :is(.primary,.primary-link,.catalog-launch>a:first-of-type,.sd-run,.lg-primary,.gb-primary,.ia-primary,.es-primary){color:#fff} html[data-xunl-theme="dark"] .cm-editor{background:#111b2b;color:#e4edf9}html[data-xunl-theme="dark"] .cm-gutters{background:#152136;color:#a6b4ca;border-color:#34445e}html[data-xunl-theme="dark"] .cm-activeLine,html[data-xunl-theme="dark"] .cm-activeLineGutter{background:#203251}html[data-xunl-theme="dark"] .cm-cursor{border-left-color:#b2ccff}html[data-xunl-theme="dark"] .cm-selectionBackground{background:#344b77!important}html[data-xunl-theme="dark"] .cm-search{background:#162135;color:#edf2fa}html[data-xunl-theme="dark"] .cm-tooltip{background:#19283e;color:#edf2fa;border-color:#40516d} html[data-xunl-theme="dark"] .cm-editor :is(.cm-button,.cm-textfield,.cm-panels){background:#19283e;color:#edf2fa;border-color:#465c7c}html[data-xunl-theme="dark"] .cm-content :is(.tok-comment,.tok-meta,.tok-operator),.md-night .cm-content :is(.tok-comment,.tok-meta,.tok-operator){color:#a7bbcd}html[data-xunl-theme="dark"] .cm-content :is(.tok-keyword,.tok-namespace,.tok-typeName,.tok-className,.tok-labelName),.md-night .cm-content :is(.tok-keyword,.tok-namespace,.tok-typeName,.tok-className,.tok-labelName){color:#d2b4ff}html[data-xunl-theme="dark"] .cm-content :is(.tok-string,.tok-string2),.md-night .cm-content :is(.tok-string,.tok-string2){color:#ffb4bd}html[data-xunl-theme="dark"] .cm-content :is(.tok-number,.tok-bool,.tok-atom,.tok-inserted),.md-night .cm-content :is(.tok-number,.tok-bool,.tok-atom,.tok-inserted){color:#85e0b6}html[data-xunl-theme="dark"] .cm-content :is(.tok-propertyName,.tok-attributeName,.tok-heading,.tok-link,.tok-url),.md-night .cm-content :is(.tok-propertyName,.tok-attributeName,.tok-heading,.tok-link,.tok-url){color:#a3caff}html[data-xunl-theme="dark"] .cm-content :is(.tok-invalid,.tok-deleted),.md-night .cm-content :is(.tok-invalid,.tok-deleted){color:#ff9caa} /* AIOS-0312 dark-mode contrast sweep: brand-blue text (#2456e8 stays the button colour) becomes a light blue on dark surfaces. */ html[data-xunl-theme="dark"] :is(.xunl-start-results-link,.ab-plan-link,.lc-settings summary,.co-import summary,.co-cuts-detail summary,.wg-power>summary,.td-hs-find,.mg-field.is-input .mg-tag,.dq-tabs button[aria-selected=true],.pdf-task-tabs button[aria-selected=true],.pdf-task-tabs button:hover){color:#8fb0ff} html[data-xunl-theme="dark"] .dq-tabs button[aria-selected=true]{border-bottom-color:#8fb0ff} /* Generated diagram previews keep their light figure colours (no invert filters); inherited text must stay dark on them. */ html[data-xunl-theme="dark"] :is([class^="xrt-"][class$="-preview"],[class^="xrt-"][class*="-preview "]){color:#172a47;color-scheme:light} html[data-xunl-theme="dark"] .rt-error{color:#ff9aa2} html[data-xunl-theme="dark"] :is(.fp-kpi strong.pos,#fp-net.pos,.fp-table td.pos){color:#6ee7a0} html[data-xunl-theme="dark"] .ts-overline{color:#6fdcb4!important} html[data-xunl-theme="dark"] .ie-demo-link{color:#c3adff} html[data-xunl-theme="dark"] .ie-shortcut-grid kbd{background:#1b2c4a;border-color:#34445e;color:#dbe4f3} html[data-xunl-theme="dark"] .po-tools #po-generate{background:#376dd7;border-color:#376dd7;color:#fff} @media(max-width:760px){.nav-wrap{gap:14px;padding:14px 18px}.header nav{order:3;flex-basis:100%;margin-left:0;justify-content:flex-start;gap:22px}.xunl-preferences{margin-left:auto}.nav-login{margin-left:0}.brand small{max-width:150px}.xunl-preferences a,.xunl-preferences select{font-size:14px;min-height:44px;padding:6px 7px}.xunl-preferences select{max-width:116px}} @media(max-width:390px){.brand{font-size:15px}.brand-mark{width:32px;height:32px;font-size:18px}.brand small{font-size:14px}.nav-login{font-size:14px;padding:6px 8px}.xunl-preferences{gap:5px}.xunl-preferences select{max-width:110px}.nav-wrap{column-gap:9px}} @media print{.xunl-preferences{display:none!important}} html[data-xunl-theme="dark"] a:focus-visible,html[data-xunl-theme="dark"] button:focus-visible,html[data-xunl-theme="dark"] input:focus-visible,html[data-xunl-theme="dark"] textarea:focus-visible,html[data-xunl-theme="dark"] select:focus-visible,html[data-xunl-theme="dark"] pre:focus-visible,html[data-xunl-theme="dark"] summary:focus-visible{outline:3px solid #405796} html[data-xunl-theme="dark"] .skip{background:#111827} html[data-xunl-theme="dark"] .header{background:#111827} html[data-xunl-theme="dark"] .brand small{color:#cad0d9} html[data-xunl-theme="dark"] .header nav{color:#cad0d9} html[data-xunl-theme="dark"] .header nav a.current{color:#a2b5eb} html[data-xunl-theme="dark"] .eyebrow{color:#a2b5eb} html[data-xunl-theme="dark"] .hero em,html[data-xunl-theme="dark"] .resources-hero em{color:#a2b5eb} html[data-xunl-theme="dark"] .hero-copy{color:#cad0d9} html[data-xunl-theme="dark"] .hero-badges{color:#cad0d9} html[data-xunl-theme="dark"] .hero-note{background:#111827} html[data-xunl-theme="dark"] .note-kicker{color:#cad0d9} html[data-xunl-theme="dark"] .hero-note a{border-top:1px solid #293a5b} html[data-xunl-theme="dark"] .hero-note a span{color:#a2b5eb} html[data-xunl-theme="dark"] .note-foot{color:#cad0d9} html[data-xunl-theme="dark"] .search-wrap{background:#111827} html[data-xunl-theme="dark"] .search-wrap>span{color:#a2b5eb} html[data-xunl-theme="dark"] .search-wrap input{color:#aac1e4} html[data-xunl-theme="dark"] .search-wrap:focus-within{outline:2px solid #405796} html[data-xunl-theme="dark"] .search-wrap kbd{background:#141b26;color:#cad0d9} html[data-xunl-theme="dark"] .filters button{color:#cad0d9} html[data-xunl-theme="dark"] .filters button.active{color:#ffffff} html[data-xunl-theme="dark"] .filters>a{color:#a2b5eb} html[data-xunl-theme="dark"] .section-top p{color:#cad0d9} html[data-xunl-theme="dark"] .tool-card{background:#111827} html[data-xunl-theme="dark"] .tool-card:hover{border-color:#405696} html[data-xunl-theme="dark"] .tool-icon{color:#a2b5eb} html[data-xunl-theme="dark"] .favorite{color:#c9cfd9} html[data-xunl-theme="dark"] .favorite[aria-pressed=true]{color:#ebd5a2} html[data-xunl-theme="dark"] .card-link h3 span{color:#c7cfdb} html[data-xunl-theme="dark"] .card-link p{color:#cad0d9} html[data-xunl-theme="dark"] .card-bottom{color:#cad0d8} html[data-xunl-theme="dark"] .badge{background:#141b27;color:#cbd0d8} html[data-xunl-theme="dark"] .empty{background:#111827} html[data-xunl-theme="dark"] .empty p{color:#cad0d9} html[data-xunl-theme="dark"] .empty button,html[data-xunl-theme="dark"] .empty a{background:#111827} html[data-xunl-theme="dark"] .workflow-grid article{border-top:2px solid #405796} html[data-xunl-theme="dark"] .workflow-grid article>span{color:#a2b5eb} html[data-xunl-theme="dark"] .workflow-grid p{color:#cad0d9} html[data-xunl-theme="dark"] .workflow-grid a{color:#a2b5eb} html[data-xunl-theme="dark"] .resource-banner{background:#141927;border:1px solid #405896} html[data-xunl-theme="dark"] .resource-banner p:not(.eyebrow){color:#c8d0da} html[data-xunl-theme="dark"] .prose{color:#c8d0da} html[data-xunl-theme="dark"] .prose h2{color:#aac1e4} html[data-xunl-theme="dark"] .prose summary{color:#aac1e4} html[data-xunl-theme="dark"] .prose a{color:#a2b5eb} html[data-xunl-theme="dark"] .footer{color:#cad0d9} html[data-xunl-theme="dark"] .brand-text{color:#aac1e4} html[data-xunl-theme="dark"] .breadcrumbs{color:#cad0d9} html[data-xunl-theme="dark"] .breadcrumbs a{color:#a2b5eb} html[data-xunl-theme="dark"] .tool-heading p:not(.eyebrow){color:#cad0d9} html[data-xunl-theme="dark"] .privacy-badge{color:#ade1c9;background:#14281d;border:1px solid #295c40} html[data-xunl-theme="dark"] .workspace{background:#111827} html[data-xunl-theme="dark"] .output-panel{background:#131926} html[data-xunl-theme="dark"] .text-button{color:#a2b5eb} html[data-xunl-theme="dark"] .field label{color:#cad0d9} html[data-xunl-theme="dark"] .field input,html[data-xunl-theme="dark"] .field select,html[data-xunl-theme="dark"] .field textarea{background:#111827;border:1px solid #2c3d58;color:#aac1e4} html[data-xunl-theme="dark"] .secondary{background:#111827;color:#cad0d9} html[data-xunl-theme="dark"] .input-note{color:#cad0d8} html[data-xunl-theme="dark"] .output-actions button{background:#111827;color:#cad0d9} html[data-xunl-theme="dark"] .status{color:#cad0d9} html[data-xunl-theme="dark"] .status.error{color:#e5a9a9;background:#261414} html[data-xunl-theme="dark"] .status.success{color:#abe3c8} html[data-xunl-theme="dark"] .result-empty{color:#c9d0d9} html[data-xunl-theme="dark"] .result-empty>span{color:#b1c1dd;background:#141b27} html[data-xunl-theme="dark"] .output-panel pre{border:1px solid #283d5d;background:#111827} html[data-xunl-theme="dark"] .preview{background:#111827} html[data-xunl-theme="dark"] .preview .serp-url{color:#cad0d9} html[data-xunl-theme="dark"] .preview .serp-title{color:#a8a2eb} html[data-xunl-theme="dark"] .preview .serp-description{color:#cfd1d4} html[data-xunl-theme="dark"] .preview a{color:#a2b5eb} html[data-xunl-theme="dark"] .related>a span{color:#a2b5eb} html[data-xunl-theme="dark"] .aside-note{background:#111827} html[data-xunl-theme="dark"] .aside-note p{color:#cad0d9} html[data-xunl-theme="dark"] .resources-hero p:not(.eyebrow){color:#cad0d9} html[data-xunl-theme="dark"] .external-card{background:#111827} html[data-xunl-theme="dark"] .external-card h2 a{color:#aac1e4} html[data-xunl-theme="dark"] .external-card h2 a:hover{color:#a2b5eb} html[data-xunl-theme="dark"] .external-card p{color:#cad0d9} html[data-xunl-theme="dark"] .legacy-help{border:1px solid #405896;background:#141927} html[data-xunl-theme="dark"] .legacy-help a{color:#a2b5eb} html[data-xunl-theme="dark"] .input-note,html[data-xunl-theme="dark"] .card-bottom,html[data-xunl-theme="dark"] .result-empty,html[data-xunl-theme="dark"] .badge{color:#c8d0da} html[data-xunl-theme="dark"] .badge{background:#141b27} html[data-xunl-theme="dark"] .favorite{color:#cad0d9} html[data-xunl-theme="dark"] .tool-search-guide{border:1px solid var(--line,#2e4157);background:var(--#111827,#111827)} html[data-xunl-theme="dark"] .tool-search-guide details{border-bottom:1px solid var(--line,#2e4157)} html[data-xunl-theme="dark"] .diagnostic-consolidation{border:1px solid var(--line,#2e4157);border-left:4px solid #2b5a4a} html[data-xunl-theme="dark"] .xrt-plan-summary{background:var(--blue-soft,#141927);border:1px solid #405896;color:#aac1e4} html[data-xunl-theme="dark"] .xrt-plan-summary strong{color:var(--blue,#a2b5eb)} html[data-xunl-theme="dark"] .xrt-stock{border:1px solid var(--line,#2b3d59);background:#111827} html[data-xunl-theme="dark"] .xrt-stock__head strong{color:#aac1e4} html[data-xunl-theme="dark"] .xrt-stock__head span{color:#cad0d9} html[data-xunl-theme="dark"] .xrt-stock__bar{background:repeating-linear-gradient(135deg,#161d26,#161d26 8px,#181f27 8px,#181f27 16px)} html[data-xunl-theme="dark"] .xrt-stock__piece{border-right:2px solid #424242} html[data-xunl-theme="dark"] .xrt-stock__cuts{color:#cad0d9} html[data-xunl-theme="dark"] .xrt-plate-sheet{border:1px solid var(--line,#2b3d59);background:#111827} html[data-xunl-theme="dark"] .xrt-plate-map{background:#181d23;border:1px solid #2d3f57} html[data-xunl-theme="dark"] .xrt-plate-parts{color:#cad0d9} html[data-xunl-theme="dark"] .fields .field-group{border:1px solid #2c3e58;background:#131925} html[data-xunl-theme="dark"] .field-group legend{color:#c5d0de} html[data-xunl-theme="dark"] .field-help{color:#cad0d8} html[data-xunl-theme="dark"] .status.warning{color:#ebd3a2;background:#272114;border:1px solid #967d40} html[data-xunl-theme="dark"] .ws-input-toolbar{border-bottom:1px solid #2b3d5a} html[data-xunl-theme="dark"] .ws-input-toolbar button,html[data-xunl-theme="dark"] .ws-section-heading button,html[data-xunl-theme="dark"] .ws-data-actions button,html[data-xunl-theme="dark"] .ws-result-tabs button,html[data-xunl-theme="dark"] .ws-dialog button{background:#111827;border:1px solid #283d5d;color:#c5d0de} html[data-xunl-theme="dark"] .ws-input-toolbar button:hover,html[data-xunl-theme="dark"] .ws-section-heading button:hover,html[data-xunl-theme="dark"] .ws-data-actions button:hover,html[data-xunl-theme="dark"] .ws-result-tabs button:hover,html[data-xunl-theme="dark"] .ws-dialog button:hover{color:#a2b5eb;border-color:#405a96;background:#141926} html[data-xunl-theme="dark"] .ws-live-toggle{color:#cad0d9} html[data-xunl-theme="dark"] .ws-import-target select{border:1px solid #283d5d;color:#c5d0de;background:#111827} html[data-xunl-theme="dark"] .ws-keyboard-hint{color:#cad0d8} html[data-xunl-theme="dark"] .ws-input-counter{color:#cad0d8} html[data-xunl-theme="dark"] .ws-file-drag{outline:2px dashed #405696;background:#141a26} html[data-xunl-theme="dark"] .ws-result-tabs{border:1px solid #2b3d59;background:#141c27} html[data-xunl-theme="dark"] .ws-result-tabs button{color:#cad0d9} html[data-xunl-theme="dark"] .ws-result-tabs button[aria-pressed=true]{background:#111827;color:#a2b5eb;border-color:#2b3d59} html[data-xunl-theme="dark"] .ws-metric{background:#111827;border:1px solid #2b3d59} html[data-xunl-theme="dark"] .ws-metric-label{color:#c9d0d9} html[data-xunl-theme="dark"] .ws-metric-value{color:#aec5e0} html[data-xunl-theme="dark"] .ws-metric-value small{color:#cad0d9} html[data-xunl-theme="dark"] .ws-metric[data-tone=positive],html[data-xunl-theme="dark"] .ws-metric[data-tone=success],html[data-xunl-theme="dark"] .ws-metric[data-tone=good]{border-color:#2c5940;background:#132518} html[data-xunl-theme="dark"] .ws-metric[data-tone=positive] .ws-metric-value,html[data-xunl-theme="dark"] .ws-metric[data-tone=success] .ws-metric-value,html[data-xunl-theme="dark"] .ws-metric[data-tone=good] .ws-metric-value{color:#a9e5c8} html[data-xunl-theme="dark"] .ws-metric[data-tone=warning]{border-color:#967d40;background:#262214} html[data-xunl-theme="dark"] .ws-metric[data-tone=warning] .ws-metric-value{color:#ebd5a2} html[data-xunl-theme="dark"] .ws-metric[data-tone=danger],html[data-xunl-theme="dark"] .ws-metric[data-tone=negative],html[data-xunl-theme="dark"] .ws-metric[data-tone=error]{border-color:#964040;background:#251313} html[data-xunl-theme="dark"] .ws-metric[data-tone=danger] .ws-metric-value,html[data-xunl-theme="dark"] .ws-metric[data-tone=negative] .ws-metric-value,html[data-xunl-theme="dark"] .ws-metric[data-tone=error] .ws-metric-value{color:#e1adad} html[data-xunl-theme="dark"] .ws-section-heading h3,html[data-xunl-theme="dark"] .ws-bars h3{color:#c2cfe0} html[data-xunl-theme="dark"] .ws-table-section{border-top:1px solid #2b3d59} html[data-xunl-theme="dark"] .ws-table-search{background:#111827;border:1px solid #283d5d;color:#afc4df} html[data-xunl-theme="dark"] .ws-table-search:focus-visible{outline:2px solid #405a96} html[data-xunl-theme="dark"] .ws-table-count{color:#cad0d9} html[data-xunl-theme="dark"] .ws-table-scroll{border:1px solid #2b3d59;background:#111827} html[data-xunl-theme="dark"] .ws-table-scroll table{color:#c5d0de} html[data-xunl-theme="dark"] .ws-table-scroll th,html[data-xunl-theme="dark"] .ws-table-scroll td{border-bottom:1px solid #2b3d5a} html[data-xunl-theme="dark"] .ws-table-scroll th{background:#141c27;color:#c4cfde} html[data-xunl-theme="dark"] .ws-table-scroll th+th,html[data-xunl-theme="dark"] .ws-table-scroll td+td{border-left:1px solid #2a3c5a} html[data-xunl-theme="dark"] .ws-table-scroll tr:nth-child(even){background:#131c26} html[data-xunl-theme="dark"] .ws-table-scroll tbody tr:hover{background:#141a26} html[data-xunl-theme="dark"] .ws-table-scroll .ws-no-rows{color:#cad0d9} html[data-xunl-theme="dark"] .ws-csv-note{color:#cad0d8} html[data-xunl-theme="dark"] .ws-bars{background:#111827;border:1px solid #2b3d59} html[data-xunl-theme="dark"] .ws-bar-label{color:#c9d0da} html[data-xunl-theme="dark"] .ws-bar-track{background:#141c27} html[data-xunl-theme="dark"] .ws-bar-fill{background:#1b2235} html[data-xunl-theme="dark"] .ws-bar-fill.ws-bar-negative{background:#351b1b} html[data-xunl-theme="dark"] .ws-bar-number{color:#c5d0de} html[data-xunl-theme="dark"] .ws-chart-note{color:#cad0d9} html[data-xunl-theme="dark"] .ws-result-notes{border:1px solid #2b3d59;background:#141b26;color:#c8d0da} html[data-xunl-theme="dark"] .ws-result-notes li::before{color:#aec0e0} html[data-xunl-theme="dark"] .ws-data-section{border-top:1px solid #2b3d59} html[data-xunl-theme="dark"] .ws-data-section summary{color:#c5d0dd} html[data-xunl-theme="dark"] .output-panel .ws-data-json{background:#111827} html[data-xunl-theme="dark"] .ws-result-note{color:#e6d2a8} html[data-xunl-theme="dark"] .ws-dialog{border:1px solid #2b3d59;color:#aac1e4;background:#111827} html[data-xunl-theme="dark"] .ws-dialog p{color:#cad0d9} html[data-xunl-theme="dark"] .ws-dialog .ws-confirm-action{color:#ffffff;border-color:#405696} html[data-xunl-theme="dark"] .ws-dialog .ws-confirm-action:hover{color:#ffffff} html[data-xunl-theme="dark"] .discover-report{border:1px solid #406396;background:#111827} html[data-xunl-theme="dark"] .discover-kicker{color:#b1bfdd} html[data-xunl-theme="dark"] .discover-heading h3{color:#abc1e3} html[data-xunl-theme="dark"] .discover-limit{color:#c9d0d9} html[data-xunl-theme="dark"] .discover-count{background:#141c26} html[data-xunl-theme="dark"] .discover-count strong{color:#b0c3de} html[data-xunl-theme="dark"] .discover-count span{color:#cad0d9} html[data-xunl-theme="dark"] .discover-count[data-tone=error] strong{color:#e0aeae} html[data-xunl-theme="dark"] .discover-count[data-tone=warning] strong{color:#ebd2a2} html[data-xunl-theme="dark"] .discover-count[data-tone=pass] strong{color:#a8e6cc} html[data-xunl-theme="dark"] .discover-filters button{border:1px solid #293f5c;background:#111827;color:#c8d0da} html[data-xunl-theme="dark"] .discover-filters button[aria-pressed=true]{background:#141a27;border-color:#405c96;color:#a2b5eb} html[data-xunl-theme="dark"] .discover-filters button:focus-visible,html[data-xunl-theme="dark"] .discover-check summary:focus-visible,html[data-xunl-theme="dark"] .discover-report a:focus-visible{outline:2px solid #405996} html[data-xunl-theme="dark"] .discover-check{border-top:1px solid #283d5d} html[data-xunl-theme="dark"] .discover-check summary::after{color:#c5d0dd} html[data-xunl-theme="dark"] .discover-check summary strong{color:#b2c3db} html[data-xunl-theme="dark"] .discover-severity{background:#141b27;color:#c7d0dc} html[data-xunl-theme="dark"] .discover-check[data-severity=error] .discover-severity{color:#dfaeae;background:#261414} html[data-xunl-theme="dark"] .discover-check[data-severity=warning] .discover-severity{color:#e8d0a6;background:#282315} html[data-xunl-theme="dark"] .discover-check[data-severity=pass] .discover-severity{color:#a8e6c9;background:#14271b} html[data-xunl-theme="dark"] .discover-actual{color:#c3cfdf} html[data-xunl-theme="dark"] .discover-advice{color:#cad0d8} html[data-xunl-theme="dark"] .discover-no-issues,html[data-xunl-theme="dark"] .discover-image-empty{color:#cad0d9} html[data-xunl-theme="dark"] .discover-report h4{color:#b2c3db;border-top:1px solid #283d5d} html[data-xunl-theme="dark"] .discover-image{background:#131926;border:1px solid #406296} html[data-xunl-theme="dark"] .discover-image-top strong{color:#b2c3db} html[data-xunl-theme="dark"] .discover-image-top span{color:#c5cfdd} html[data-xunl-theme="dark"] .discover-source{color:#c8cfda} html[data-xunl-theme="dark"] .discover-dimensions{color:#aac2e4} html[data-xunl-theme="dark"] .discover-image-stats{color:#c8cfdb} html[data-xunl-theme="dark"] .discover-image-note,html[data-xunl-theme="dark"] .discover-evidence{color:#c9d0d9} html[data-xunl-theme="dark"] .discover-image-link{color:#a8bfe5} html[data-xunl-theme="dark"] .discover-image-url{color:#ddd0c5} html[data-xunl-theme="dark"] .discover-scope{color:#cad0d8} html[data-xunl-theme="dark"] .discover-official{color:#a8bfe5} html[data-xunl-theme="dark"] .discover-seo-heading{color:#b2c3db} html[data-xunl-theme="dark"] .ai-visual-shell{background:radial-gradient(ellipse at center,#141827 0%,#131a26 48%,#111827 76%)} html[data-xunl-theme="dark"] .ai-visual-shell figcaption{color:#c8d0da} html[data-xunl-theme="dark"] .ai-visual-signal{background:#1f3d39;border:3px solid #409683} html[data-xunl-theme="dark"] .ws-next-steps{border:1px solid #2b3d59;background:linear-gradient(135deg,#131926 0%,#141a27 100%)} html[data-xunl-theme="dark"] .ws-next-steps-head h3{color:#a9c2e5} html[data-xunl-theme="dark"] .ws-next-step-card{background:#111827;border:1px solid #406196} html[data-xunl-theme="dark"] .ws-next-step-card:hover{border-color:#405696} html[data-xunl-theme="dark"] .ws-next-step-card strong{color:#a2b5eb} html[data-xunl-theme="dark"] .ws-next-step-card span{color:#c9d0d9} html[data-xunl-theme="dark"] .ws-result-tabs .ws-share-button{border:1px solid #406396;background:#111827;color:#adc2e1} html[data-xunl-theme="dark"] .ws-result-tabs .ws-share-button:hover{border-color:#405696;color:#a2b5eb;background:#141926} html[data-xunl-theme="dark"] html[data-xunl-theme="dark"] .ws-result-tabs .ws-share-button:hover{border-color:#405c96} } @media print{.xunl-preferences{display:none!important}html[data-xunl-theme="dark"]{color-scheme:light!important;color:#172a47;background:#fff}} /* bundled source: experience.css */ /* Shared reading and touch defaults. Tool artwork, code contents and export documents retain their own styles. */ html[data-xunl-readable]{font-size:16px;text-size-adjust:100%;-webkit-text-size-adjust:100%;scroll-padding-top:24px} html[data-xunl-readable] body{font-size:1.0625rem;line-height:1.75} html[data-xunl-readable] :is(.prose,.prose p,.prose li,.prose details p,.prose summary,.hero-copy,.resources-hero>p,.tool-heading p:not(.eyebrow)){font-size:1.0625rem;line-height:1.8} html[data-xunl-readable] :is(.prose,.tool-heading,.tool-card,.external-card,.related,.footer){overflow-wrap:anywhere} html[data-xunl-readable] :is(.tool-heading>div,.panel-title,.input-panel,.output-panel,.catalog-card,.catalog-search-row,.catalog-sort,.tool-grid>*):not(.cm-editor){min-width:0} html[data-xunl-readable] :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),select,textarea):not(:where(.cm-editor textarea,.cp-preview *,.es-mail *,.lg-preview *)){font-size:1rem;line-height:1.5} html[data-xunl-readable] :is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),select){min-height:44px} html[data-xunl-readable] :is(button,.nav-login,.primary-link,.filters a,.catalog-primary,.catalog-quicklinks a,.catalog-members a,.catalog-clear,summary):not(:where(.cp-preview *,.es-mail *,.lg-preview *,.md-rendered *)){min-height:44px;max-width:100%;white-space:normal;overflow-wrap:anywhere} html[data-xunl-readable] button:not(:where(.cp-preview *,.es-mail *,.lg-preview *,.md-rendered *)){min-width:44px} html[data-xunl-readable] :is(.header nav,.xunl-preferences,.filters,.panel-title,.form-actions,.output-actions,.ws-result-tabs,.ws-table-actions,.md-document-bar,.md-view-controls,.json-toolbar){flex-wrap:wrap} html[data-xunl-readable] :is(input[type="checkbox"],input[type="radio"]){width:20px;height:20px;vertical-align:middle;flex-shrink:0} html[data-xunl-readable] .prose h2{font-size:1.375rem;line-height:1.5} html[data-xunl-readable] .card-link h3{font-size:1.125rem;line-height:1.5} html[data-xunl-readable] :is(.catalog-card .card-link p,.external-card p){font-size:1rem;line-height:1.75} html[data-xunl-readable] :is(.input-note,.status,.ws-note,.ws-field-help,.aside-note p,.related>a,.footer p){font-size:.875rem;line-height:1.75} html[data-xunl-readable] .catalog-quicklinks a{display:inline-flex;align-items:center;font-size:.875rem} html[data-xunl-readable] .catalog-search-row{grid-template-columns:minmax(0,1fr) minmax(150px,auto)} html[data-xunl-readable] :is(.header nav a,.xunl-preferences a){display:inline-flex;align-items:center;min-height:44px} html[data-xunl-readable] .header nav{column-gap:24px;row-gap:8px} html[data-xunl-readable] :is(.section-top,.resource-banner,.footer){gap:20px} html[data-xunl-readable] :is(.hero-badges,.card-bottom){flex-wrap:wrap} html[data-xunl-readable] :is(.cm-editor,.cm-editor .cm-scroller,.cm-editor .cm-content){font-size:1rem;line-height:1.6} @media(max-width:760px){html[data-xunl-readable] body,html[data-xunl-readable] :is(.prose,.prose p,.prose li,.prose details p,.prose summary,.hero-copy,.resources-hero>p,.tool-heading p:not(.eyebrow)){font-size:1rem}html[data-xunl-readable] .catalog-search-row{grid-template-columns:minmax(0,1fr)}html[data-xunl-readable] .catalog-sort{width:100%;justify-content:space-between}html[data-xunl-readable] .xunl-preferences select{font-size:1rem;max-width:150px}html[data-xunl-readable] .xunl-preferences .xunl-theme-label{display:none}html[data-xunl-readable] .header nav{gap:12px 22px}html[data-xunl-readable] .header .brand{flex:1;min-width:150px}html[data-xunl-readable] .xunl-preferences{margin-left:0}html[data-xunl-readable] .nav-login{margin-left:auto}html[data-xunl-readable] :is(.section-top,.resource-banner,.footer){flex-wrap:wrap}.tr-protection summary{flex-wrap:wrap}.tr-protection summary>span:last-child{white-space:normal}} @media(prefers-reduced-motion:reduce){html[data-xunl-readable]{scroll-behavior:auto}} @media print{html[data-xunl-readable]{font-size:12pt}html[data-xunl-readable] :is(button,.nav-login,.primary-link,summary){min-height:0}html[data-xunl-readable] ins.adsbygoogle{display:none!important}} /* Short, finite feedback; no layout properties or user artwork are animated. */ html[data-xunl-readable] :is(.catalog-card,.tool-card,.external-card):not(:where(.cm-editor *,.monaco-editor *,.cp-preview *,.es-mail *,.lg-preview *,.md-rendered *,[data-xunl-user-content] *,[data-user-content] *)){transition:transform 180ms cubic-bezier(.2,.7,.2,1)} html[data-xunl-readable] :is(.form-actions button,.output-actions button,.primary-link,.catalog-primary,.catalog-quicklinks a,.catalog-favorite,.catalog-clear,.related>a,.ts-primary,.mh-primary,.ia-primary,.sd-primary,.gb-primary,.lg-primary,.tr-primary,[data-xunl-micro]):not(:where(.cm-editor *,.monaco-editor *,.cp-preview *,.es-mail *,.lg-preview *,.md-rendered *,[data-xunl-user-content] *,[data-user-content] *)){transition:transform 150ms ease} html[data-xunl-readable] :is(.card-link,.catalog-primary,.primary-link,.catalog-quicklinks a,.catalog-favorite,.related>a,[data-xunl-micro]):not(:where(.cm-editor *,.monaco-editor *,.cp-preview *,.es-mail *,.lg-preview *,.md-rendered *,[data-xunl-user-content] *,[data-user-content] *)):focus-visible{outline:3px solid #769af0;outline-offset:4px} @media(hover:hover) and (pointer:fine){ html[data-xunl-readable] :is(.catalog-card,.tool-card,.external-card):not(:where(.cm-editor *,.monaco-editor *,.cp-preview *,.es-mail *,.lg-preview *,.md-rendered *,[data-xunl-user-content] *,[data-user-content] *)):hover,html[data-xunl-readable] :is(.catalog-card,.tool-card,.external-card):not(:where(.cm-editor *,.monaco-editor *,.cp-preview *,.es-mail *,.lg-preview *,.md-rendered *,[data-xunl-user-content] *,[data-user-content] *)):focus-within{transform:translateY(-2px);box-shadow:0 10px 24px #1c355311} html[data-xunl-readable] :is(.form-actions button,.output-actions button,.primary-link,.catalog-primary,.catalog-quicklinks a,.catalog-favorite,.catalog-clear,.related>a,.ts-primary,.mh-primary,.ia-primary,.sd-primary,.gb-primary,.lg-primary,.tr-primary,[data-xunl-micro]):not(:disabled):not([aria-disabled="true"]):not(:where(.cm-editor *,.monaco-editor *,.cp-preview *,.es-mail *,.lg-preview *,.md-rendered *,[data-xunl-user-content] *,[data-user-content] *)):hover{transform:translateY(-1px)} } html[data-xunl-readable] :is(.form-actions button,.output-actions button,.primary-link,.catalog-primary,.catalog-quicklinks a,.catalog-favorite,.catalog-clear,.related>a,.ts-primary,.mh-primary,.ia-primary,.sd-primary,.gb-primary,.lg-primary,.tr-primary,[data-xunl-micro]):not(:disabled):not([aria-disabled="true"]):not(:where(.cm-editor *,.monaco-editor *,.cp-preview *,.es-mail *,.lg-preview *,.md-rendered *,[data-xunl-user-content] *,[data-user-content] *)):active{transform:translateY(1px)} @media(hover:none),(pointer:coarse){html[data-xunl-readable] :is(.catalog-card,.tool-card,.external-card):not(:where(.cm-editor *,.monaco-editor *,.cp-preview *,.es-mail *,.lg-preview *,.md-rendered *,[data-xunl-user-content] *,[data-user-content] *)):hover{transform:none}} @media(prefers-reduced-motion:reduce){ html[data-xunl-readable] :is(.catalog-card,.tool-card,.external-card,.form-actions button,.output-actions button,.primary-link,.catalog-primary,.catalog-quicklinks a,.catalog-favorite,.catalog-clear,.related>a,.ts-primary,.mh-primary,.ia-primary,.sd-primary,.gb-primary,.lg-primary,.tr-primary,[data-xunl-micro],[data-xunl-reveal]):not(:where(.cm-editor *,.monaco-editor *,.cp-preview *,.es-mail *,.lg-preview *,.md-rendered *,[data-xunl-user-content] *,[data-user-content] *)){transition:none!important;animation:none!important;transform:none!important} } @media print{html[data-xunl-readable] :is(.catalog-card,.tool-card,.external-card,[data-xunl-reveal]):not(:where(.cm-editor *,.monaco-editor *,.cp-preview *,.es-mail *,.lg-preview *,.md-rendered *,[data-xunl-user-content] *,[data-user-content] *)){transform:none!important;opacity:1!important;box-shadow:none!important;animation:none!important}} /* 手机端工具页头部压成一行：品牌 + English + 登录。原来品牌标语、外观选择、导航各占一行，头部 206px，工具输入框被挤出首屏。外观在手机上跟随系统。 */ @media(max-width:760px){ html[data-xunl-readable] .header .nav-wrap{flex-wrap:nowrap;gap:8px;padding:8px 16px} html[data-xunl-readable] .header .brand small,html[data-xunl-readable] .header nav,html[data-xunl-readable] .xunl-preferences .xunl-theme-control{display:none} html[data-xunl-readable] .header .brand{min-width:0;font-size:16px} html[data-xunl-readable] .header .brand-mark{width:32px;height:32px} html[data-xunl-readable] .xunl-preferences{margin-left:auto;flex-wrap:nowrap} html[data-xunl-readable] .header .nav-login{order:3;white-space:nowrap} html[data-xunl-readable] .breadcrumbs{padding:12px 0} } /* 手机端：先给输入框，再给操作按钮。分类返回块与面包屑重复、顶部注册/咨询链接在结果下方已有同组入口，手机上隐藏；生成按钮和导入工具条移到字段之后（实时更新时结果随输入变化）。 */ @media(max-width:760px){ html[data-xunl-readable] main.tool-page>.category-return,html[data-xunl-readable] main.tool-page>.ts-row>.category-return,html[data-xunl-readable] main.tool-page>.xcta-quick{display:none} html[data-xunl-readable] form:has(>.xunl-start-block){display:flex;flex-direction:column} html[data-xunl-readable] form:has(>.xunl-start-block)>.fields{order:1} html[data-xunl-readable] form:has(>.xunl-start-block)>.ws-input-toolbar{order:2;margin-top:16px} html[data-xunl-readable] form:has(>.xunl-start-block)>.xunl-start-block{order:3;margin-top:16px} } /* 手机端工具目录：先给工具列表，再给「工作流程」旅程与说明区（原来列表在第 3000px 之后）；卡片底部的分类/标签行与上方筛选重复，手机上省掉。 */ @media(max-width:760px){ html[data-xunl-readable] main.catalog-hub{display:flex;flex-direction:column} html[data-xunl-readable] main.catalog-hub>.library{order:1} html[data-xunl-readable] main.catalog-hub>:is(.catalog-launches,.resource-banner,.xcta-card,.hub-faq){order:2} html[data-xunl-readable] main.catalog-hub .catalog-card>.card-bottom{display:none} } /* 工具站头部补「免费注册」：主站头部一直有，工具页是最大的注册来源却没有入口。 */ html[data-xunl-readable] .header .nav-signup{background:var(--blue,#2456e8);color:#fff;border:1px solid var(--blue,#2456e8);border-radius:9px;padding:8px 16px;font-size:14px;font-weight:600;white-space:nowrap} html[data-xunl-readable] .header .nav-signup:hover{filter:brightness(1.08)} @media(max-width:760px){html[data-xunl-readable] .header .nav-signup{display:none}} /* A loaded desktop Auto Ads creative can retain its original width after a window resize. Keep that overflow in its own container; preserve the creative dimensions, iframe and loader, and leave tool tables/editors scrollable. */ html[data-xunl-readable] .google-auto-placed{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain} /* bundled source: tool-shelf.css */ /* Favourite toggle on tool pages and the "My tools" shelf on the hub (tool-shelf.js). */ .ts-row{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap} .ts-row>.category-return{flex:1 1 auto;min-width:0} .ts-bar{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;margin:6px 0} .ts-star{display:inline-grid;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap} .ts-star-label,.ts-star-reserve{grid-area:1/1} .ts-star-reserve{visibility:hidden} .ts-count{display:inline-block;inline-size:6ch;text-align:center} .ts-star:hover{border-color:var(--blue);color:var(--blue)} .ts-star[aria-pressed="true"]{border-color:#f0b429;background:#fff8e6;color:#8a5a00} .ts-mine{font-size:14px;color:var(--muted);text-decoration:none;white-space:nowrap} .ts-mine:hover{color:var(--blue);text-decoration:underline} .ts-star:focus-visible,.ts-mine:focus-visible,.ts-chip:focus-visible,.ts-clear:focus-visible{outline:3px solid #547dea;outline-offset:2px} .ts-toast{position:fixed;left:50%;bottom:24px;z-index:60;max-width:min(560px,calc(100vw - 32px));padding:12px 18px;border-radius:12px;background:#172a47;color:#fff;font-size:14px;line-height:1.6;box-shadow:0 10px 30px rgba(15,30,60,.25);opacity:0;transform:translate(-50%,12px);pointer-events:none;transition:opacity .2s,transform .2s} .ts-toast.show{opacity:1;transform:translate(-50%,0)} .tool-shelf{margin:0 0 22px;padding:16px 20px;border:1px solid var(--line);border-radius:16px;background:var(--white)} .ts-head{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap;margin-bottom:8px} .ts-head h2{margin:0;font-size:18px} .ts-head span{font-size:13px;color:var(--muted)} .ts-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 0} .ts-label{min-width:64px;font-size:13px;font-weight:700;color:var(--muted)} .ts-chip{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font-size:14px;text-decoration:none} .ts-chip:hover{border-color:var(--blue);color:var(--blue)} .ts-chip-fav{border-color:#f3cf7a;background:#fff8e6} .ts-clear{margin-left:auto;border:0;background:none;color:var(--muted);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline} html[data-xunl-theme="dark"] .ts-star[aria-pressed="true"],html[data-xunl-theme="dark"] .ts-chip-fav{border-color:#a07a1f;background:#2e2610;color:#f5d27a} html[data-xunl-theme="dark"] .ts-toast{background:#e5edf9;color:#0b1220} @media (max-width:640px){.ts-bar{width:100%;justify-content:space-between}.ts-label{min-width:100%}.ts-clear{margin-left:0}} @media (prefers-reduced-motion:reduce){.ts-toast{transition:none}} /* bundled source: stem-sim.css */ /* XunL STEM Interactive Simulation & Classroom Workbench Styles (STEM-SIM) */ .stem-page { --stem-surface: #ffffff; --stem-surface-alt: #f8fafc; --stem-border: #dbe3f0; --stem-text: #0f172a; --stem-muted: #475569; --stem-accent: #2456e8; --stem-accent-soft: #eff6ff; --stem-warn-bg: #fffbeb; --stem-warn-border: #f59e0b; --stem-warn-text: #92400e; --stem-ok-bg: #ecfdf5; --stem-ok-border: #10b981; --stem-ok-text: #065f46; --stem-code-bg: #0f172a; --stem-code-text: #f8fafc; } html[data-xunl-theme="dark"] .stem-page { --stem-surface: #111c2d; --stem-surface-alt: #17253b; --stem-border: #293b56; --stem-text: #f1f5f9; --stem-muted: #94a3b8; --stem-accent: #60a5fa; --stem-accent-soft: rgba(59, 130, 246, 0.16); --stem-warn-bg: rgba(245, 158, 11, 0.14); --stem-warn-border: #fbbf24; --stem-warn-text: #fde68a; --stem-ok-bg: rgba(16, 185, 129, 0.14); --stem-ok-border: #34d399; --stem-ok-text: #a7f3d0; --stem-code-bg: #09101d; --stem-code-text: #e2e8f0; } .stem-coppa-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; margin-bottom: 14px; border-radius: 10px; background: var(--stem-accent-soft); border: 1px solid var(--stem-border); color: var(--stem-text); font-size: 0.875rem; line-height: 1.45; } .stem-coppa-tag { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: var(--stem-accent); color: #ffffff; font-weight: 600; font-size: 0.75rem; white-space: nowrap; } .stem-workbench { background: var(--stem-surface); border: 1px solid var(--stem-border); border-radius: 16px; padding: 18px; margin: 14px 0 24px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05); } .stem-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--stem-border); } .stem-meta-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .stem-scene-pill, .stem-curriculum-pill { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; background: var(--stem-surface-alt); border: 1px solid var(--stem-border); color: var(--stem-text); } .stem-scene-pill { background: var(--stem-accent-soft); color: var(--stem-accent); } .stem-classroom-actions { display: flex; flex-wrap: wrap; gap: 8px; } .stem-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--stem-border); background: var(--stem-surface-alt); color: var(--stem-text); font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .stem-btn:hover, .stem-btn:focus-visible { border-color: var(--stem-accent); background: var(--stem-accent-soft); } .stem-btn-primary { background: var(--stem-accent); border-color: var(--stem-accent); color: #ffffff; } .stem-btn-primary:hover, .stem-btn-primary:focus-visible { background: #1d4ed8; color: #ffffff; } .stem-preset-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; padding: 10px 12px; border-radius: 12px; background: var(--stem-surface-alt); border: 1px solid var(--stem-border); } .stem-preset-label { font-size: 0.8125rem; font-weight: 700; color: var(--stem-muted); margin-right: 4px; } .stem-preset-btn { min-height: 44px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--stem-border); background: var(--stem-surface); color: var(--stem-text); font-size: 0.84rem; font-weight: 600; cursor: pointer; transition: all 0.15s ease; } .stem-preset-btn[aria-pressed="true"], .stem-preset-btn:hover { border-color: var(--stem-accent); background: var(--stem-accent-soft); color: var(--stem-accent); } .stem-trap-banner { padding: 12px 15px; margin-bottom: 14px; border-radius: 12px; background: var(--stem-warn-bg); border: 1px solid var(--stem-warn-border); color: var(--stem-warn-text); font-size: 0.9rem; line-height: 1.5; } .stem-trap-banner strong { display: inline-block; margin-right: 6px; } .stem-main-grid { display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(300px, 1fr); gap: 18px; align-items: start; } .stem-canvas-card, .stem-controls-card { background: var(--stem-surface-alt); border: 1px solid var(--stem-border); border-radius: 14px; padding: 14px; } .stem-canvas-wrap { position: relative; width: 100%; aspect-ratio: 16 / 10; background: #0b1324; border-radius: 10px; overflow: hidden; border: 1px solid var(--stem-border); } .stem-canvas { display: block; width: 100%; height: 100%; touch-action: manipulation; } .stem-transport-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; } .stem-time-slider-wrap { display: flex; align-items: center; gap: 8px; flex: 1 1 180px; min-width: 160px; } .stem-time-slider { width: 100%; height: 44px; cursor: pointer; accent-color: var(--stem-accent); } .stem-speed-select { min-height: 44px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--stem-border); background: var(--stem-surface); color: var(--stem-text); font-weight: 600; } .stem-canvas-hint { margin: 8px 0 0; font-size: 0.8125rem; color: var(--stem-muted); } .stem-controls-title { margin: 0 0 12px; font-size: 1rem; font-weight: 700; color: var(--stem-text); } .stem-params-list { display: flex; flex-direction: column; gap: 12px; } .stem-param-row { background: var(--stem-surface); border: 1px solid var(--stem-border); border-radius: 10px; padding: 10px 12px; } .stem-param-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .stem-param-head label { font-size: 0.875rem; font-weight: 600; color: var(--stem-text); } .stem-param-val-group { display: inline-flex; align-items: center; gap: 4px; } .stem-param-number { width: 82px; min-height: 38px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--stem-border); background: var(--stem-surface-alt); color: var(--stem-text); font-weight: 700; font-size: 0.875rem; text-align: right; } .stem-param-unit { font-size: 0.8125rem; color: var(--stem-muted); font-weight: 600; } .stem-param-slider { width: 100%; height: 36px; cursor: pointer; accent-color: var(--stem-accent); } .stem-kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; } .stem-kpi-card { background: var(--stem-surface); border: 1px solid var(--stem-border); border-radius: 10px; padding: 10px 12px; } .stem-kpi-label { display: block; font-size: 0.76rem; font-weight: 600; color: var(--stem-muted); margin-bottom: 4px; } .stem-kpi-value { display: block; font-size: 1.15rem; font-weight: 800; color: var(--stem-accent); word-break: break-word; } .stem-kpi-sub { display: block; font-size: 0.75rem; color: var(--stem-muted); margin-top: 2px; } .stem-derivation-card { margin-top: 18px; background: var(--stem-surface-alt); border: 1px solid var(--stem-border); border-radius: 14px; padding: 14px 16px; } .stem-derivation-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .stem-derivation-head h2 { margin: 0; font-size: 1.05rem; color: var(--stem-text); } .stem-derivation-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .stem-step-box { background: var(--stem-surface); border: 1px solid var(--stem-border); border-radius: 10px; padding: 12px; } .stem-step-tag { display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--stem-accent); margin-bottom: 6px; } .stem-step-formula { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.9rem; line-height: 1.5; color: var(--stem-text); margin: 0; white-space: pre-wrap; } .stem-toast:not([hidden]) { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2147483600; max-width: min(92vw, 640px); padding: 10px 18px; border-radius: 999px; background: rgba(15, 23, 42, 0.92); color: #f8fafc; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); } .stem-toast { margin: 8px 0 0; font-size: 0.85rem; font-weight: 600; color: var(--stem-ok-text); min-height: 1.25em; } /* Worked Examples & Worksheet Print Cards */ .stem-examples-grid, .stem-worksheet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 14px 0; } .stem-example-card, .stem-worksheet-card { background: var(--stem-surface-alt); border: 1px solid var(--stem-border); border-radius: 12px; padding: 14px; } .stem-example-card h3, .stem-worksheet-card h3 { margin-top: 0; font-size: 1rem; } .stem-review-signoff { margin-top: 22px; padding: 14px 16px; border-radius: 12px; background: var(--stem-surface-alt); border: 1px solid var(--stem-border); font-size: 0.85rem; color: var(--stem-muted); } /* Reserved-height Manual AdSense Slot (Strictly Outside Canvas & Controls) */ .stem-ad-slot { min-height: 120px; margin: 28px 0; padding: 12px; border-radius: 12px; border: 1px dashed var(--stem-border); background: var(--stem-surface-alt); display: flex; flex-direction: column; align-items: center; justify-content: center; } .stem-ad-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--stem-muted); margin-bottom: 6px; } @media (max-width: 960px) { .stem-main-grid { grid-template-columns: 1fr; } .stem-derivation-steps { grid-template-columns: 1fr; } } @media (max-width: 520px) { .stem-workbench { padding: 12px; } .stem-kpi-grid { grid-template-columns: 1fr; } } /* A4 Classroom Worksheet Print Mode */ @media print { header, footer, .breadcrumbs, .ts-row, .stem-classroom-actions, .stem-transport-bar, .stem-ad-slot, .category-related, .tool-search-guide, .xcta-card { display: none !important; } body, .stem-page, .stem-workbench { background: #ffffff !important; color: #000000 !important; box-shadow: none !important; border: none !important; padding: 0 !important; margin: 0 !important; } .stem-main-grid { grid-template-columns: 1.2fr 1fr !important; } .stem-derivation-steps { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; } details { open: true; } } /* ======================================================= * XunL Container-Loading Modern Workbench & Layout Tokens * ======================================================= */ .lp-page { max-width: 1320px; margin: 0 auto; padding: 0 20px; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .sr-only:focus { position: static !important; width: auto; height: auto; padding: 8px 14px; background: var(--blue, #2456e8); color: #fff; border-radius: 8px; z-index: 9999; display: inline-block; margin-bottom: 10px; } .lp-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; } .lp-heading h1 { font-size: clamp(26px, 3.8vw, 38px); line-height: 1.25; margin: 8px 0 10px; font-weight: 800; color: var(--ink, #0f172a); } .lp-heading p { color: var(--muted, #64748b); font-size: 15px; line-height: 1.55; max-width: 820px; margin: 0 0 12px; } .lp-heading .eyebrow { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--blue, #2456e8); margin-bottom: 6px; } .xfree-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; } .xfree-chips li { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--paper, #f8fafc); border: 1px solid var(--line, #e2e8f0); color: var(--muted, #64748b); } .privacy-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; white-space: nowrap; } html[data-xunl-theme="dark"] .privacy-badge { background: rgba(22, 101, 52, 0.25); color: #86efac; border-color: rgba(134, 239, 172, 0.3); } .tool-favorite-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line, #e2e8f0); background: var(--white, #ffffff); color: var(--ink, #0f172a); cursor: pointer; transition: all .15s ease; } .tool-favorite-btn:hover { border-color: var(--blue, #2456e8); color: var(--blue, #2456e8); } /* Presets bar */ .stem-presets-bar, .lp-family { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 20px; padding: 10px 16px; background: var(--paper, #f8fafc); border: 1px solid var(--line, #e2e8f0); border-radius: 14px; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02); } html[data-xunl-theme="dark"] .stem-presets-bar, html[data-xunl-theme="dark"] .lp-family { background: #17253b; border-color: #293b56; } .stem-presets-label { font-size: 13px; font-weight: 700; color: var(--muted, #64748b); margin-right: 4px; white-space: nowrap; } .stem-presets-list { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .stem-preset-pill, .lp-preset-pill { font-size: 13px; line-height: 1.4; border: 1px solid var(--line, #e2e8f0); background: var(--white, #ffffff); border-radius: 999px; padding: 6px 14px; color: var(--ink, #0f172a); cursor: pointer; font-weight: 500; transition: all .2s cubic-bezier(0.4, 0, 0.2, 1); } .stem-preset-pill:hover, .lp-preset-pill:hover { border-color: var(--blue, #2456e8); color: var(--blue, #2456e8); background: #eff6ff; transform: translateY(-1px); } .stem-preset-pill.active, .lp-preset-pill.active { background: var(--blue, #2456e8); border-color: var(--blue, #2456e8); color: #ffffff; font-weight: 600; box-shadow: 0 4px 12px rgba(36, 86, 232, 0.25); } /* 3D Stage Container */ .stem-stage-wrap, .lp-view { margin-bottom: 24px; border: 1px solid var(--line, #e2e8f0); border-radius: 18px; background: var(--white, #ffffff); padding: 18px 20px; box-shadow: 0 12px 36px rgba(15, 23, 42, 0.05); } html[data-xunl-theme="dark"] .stem-stage-wrap, html[data-xunl-theme="dark"] .lp-view { background: #111c2d; border-color: #293b56; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25); } .stem-stage-header, .lp-view-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .stem-stage-title-wrap { display: flex; align-items: center; gap: 10px; } .stem-stage-title { font-size: 16px; font-weight: 700; color: var(--ink, #0f172a); } html[data-xunl-theme="dark"] .stem-stage-title { color: #f1f5f9; } .stem-badge-live { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgba(16,185,129,0.12); color: #059669; border: 1px solid rgba(16,185,129,0.25); } .lp-tabs { display: flex; gap: 6px; flex-wrap: wrap; } .stem-cam-btn { min-height: 32px; border: 1px solid var(--line, #e2e8f0); border-radius: 999px; padding: 4px 12px; background: var(--white, #ffffff); color: var(--ink, #0f172a); cursor: pointer; font: inherit; font-size: 13px; font-weight: 500; transition: all .15s ease; } .stem-cam-btn:hover { border-color: var(--blue, #2456e8); color: var(--blue, #2456e8); } .stem-cam-btn.active, .stem-cam-btn[aria-selected="true"] { background: var(--blue, #2456e8); border-color: var(--blue, #2456e8); color: #ffffff; font-weight: 600; } .stem-canvas-container, .lp-stage { position: relative; width: 100%; aspect-ratio: 16 / 9.6; max-height: 520px; background: radial-gradient(circle at 50% 30%, #17253b 0%, #0b111e 100%); border-radius: 14px; overflow: hidden; box-shadow: inset 0 2px 14px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.12); border: 1px solid rgba(255, 255, 255, 0.08); } .stem-canvas { display: block; width: 100%; height: 100%; object-fit: contain; cursor: grab; touch-action: pan-y; } .stem-canvas:active { cursor: grabbing; } .lp-view-tools { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; z-index: 10; } .stem-tool-btn { min-height: 30px; padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.2); background: rgba(15,23,42,0.75); color: #f1f5f9; font-size: 12px; font-weight: 500; cursor: pointer; backdrop-filter: blur(4px); transition: all .15s ease; } .stem-tool-btn:hover { background: rgba(36,86,232,0.85); border-color: var(--blue, #2456e8); color: #fff; } /* Playback bar */ .stem-playback-bar, .stem-transport-bar { margin-top: 14px; padding: 12px 16px; background: var(--paper, #f8fafc); border: 1px solid var(--line, #e2e8f0); border-radius: 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } html[data-xunl-theme="dark"] .stem-playback-bar, html[data-xunl-theme="dark"] .stem-transport-bar { background: #17253b; border-color: #293b56; } .stem-playback-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .stem-btn-play { min-height: 36px; padding: 6px 16px; border-radius: 8px; background: var(--blue, #2456e8); color: #ffffff; border: 1px solid var(--blue, #2456e8); font-weight: 600; font-size: 13px; cursor: pointer; transition: all .15s ease; } .stem-btn-play:hover { background: #1d4ed8; transform: translateY(-1px); } .stem-btn-ctrl { min-height: 36px; padding: 6px 12px; border-radius: 8px; background: var(--white, #ffffff); color: var(--ink, #0f172a); border: 1px solid var(--line, #e2e8f0); font-weight: 500; font-size: 13px; cursor: pointer; transition: all .15s ease; } .stem-btn-ctrl:hover { border-color: var(--blue, #2456e8); color: var(--blue, #2456e8); } html[data-xunl-theme="dark"] .stem-btn-ctrl { background: #111c2d; color: #f1f5f9; border-color: #293b56; } .stem-speed-wrap { display: flex; align-items: center; gap: 6px; } .stem-speed-label { font-size: 13px; color: var(--muted, #64748b); font-weight: 500; } .stem-speed-select { min-height: 34px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line, #e2e8f0); background: var(--white, #ffffff); color: var(--ink, #0f172a); font-size: 13px; font-weight: 600; cursor: pointer; } html[data-xunl-theme="dark"] .stem-speed-select { background: #111c2d; color: #f1f5f9; border-color: #293b56; } .stem-time-scrub { flex: 1 1 200px; display: flex; align-items: center; min-width: 180px; } .stem-time-slider { width: 100%; height: 6px; border-radius: 3px; accent-color: var(--blue, #2456e8); cursor: pointer; } /* Action buttons */ .lp-actions { display: flex; gap: 8px; flex-wrap: wrap; } .stem-btn-action { min-height: 32px; padding: 4px 12px; border-radius: 8px; background: var(--white, #ffffff); border: 1px solid var(--line, #e2e8f0); font-size: 13px; font-weight: 500; color: var(--ink, #0f172a); cursor: pointer; transition: all .15s ease; } .stem-btn-action:hover { border-color: var(--blue, #2456e8); color: var(--blue, #2456e8); background: #eff6ff; } html[data-xunl-theme="dark"] .stem-btn-action { background: #111c2d; color: #f1f5f9; border-color: #293b56; } .lp-workbench { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); border: 1px solid var(--line, #e2e8f0); border-radius: 18px; background: var(--white, #ffffff); overflow: hidden; box-shadow: 0 14px 42px rgba(23,42,71,.06); margin-bottom: 24px; } @media (max-width: 900px) { .lp-workbench { grid-template-columns: 1fr; } } .lp-form { padding: 22px 24px; border-right: 1px solid var(--line, #e2e8f0); min-width: 0; } @media (max-width: 900px) { .lp-form { border-right: none; border-bottom: 1px solid var(--line, #e2e8f0); } } .lp-output { padding: 22px 24px; background: var(--paper, #f8fafc); min-width: 0; } html[data-xunl-theme="dark"] .lp-workbench { background: #111c2d; border-color: #293b56; } html[data-xunl-theme="dark"] .lp-form { border-color: #293b56; } html[data-xunl-theme="dark"] .lp-output { background: #17253b; } .lp-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin: 12px 0; } .stem-kpi-card { background: var(--white, #ffffff); border: 1px solid var(--line, #e2e8f0); border-radius: 12px; padding: 12px 14px; box-shadow: 0 2px 6px rgba(0,0,0,0.02); } html[data-xunl-theme="dark"] .stem-kpi-card { background: #111c2d; border-color: #293b56; } .stem-kpi-label { font-size: 12px; color: var(--muted, #64748b); margin-bottom: 4px; font-weight: 500; } .stem-kpi-val { font-size: 22px; font-weight: 700; color: var(--ink, #0f172a); font-variant-numeric: tabular-nums; } html[data-xunl-theme="dark"] .stem-kpi-val { color: #f1f5f9; } .stem-kpi-unit { font-size: 13px; color: var(--muted, #64748b); font-weight: 400; margin-left: 3px; } /* Derivation Header & Body */ .lp-derivation-card { background: var(--white, #ffffff); border: 1px solid var(--line, #e2e8f0); border-radius: 12px; padding: 14px 16px; margin-top: 14px; } html[data-xunl-theme="dark"] .lp-derivation-card { background: #111c2d; border-color: #293b56; } .stem-derivation-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 14px; font-weight: 700; color: var(--ink, #0f172a); } html[data-xunl-theme="dark"] .stem-derivation-header { color: #f1f5f9; } .stem-btn-text { background: none; border: none; color: var(--blue, #2456e8); font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 6px; } .stem-btn-text:hover { text-decoration: underline; } .stem-derivation-body { display: flex; flex-direction: column; gap: 8px; } .stem-step-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted, #64748b); flex-wrap: wrap; } .stem-step-item strong { color: var(--ink, #0f172a); font-weight: 600; } html[data-xunl-theme="dark"] .stem-step-item strong { color: #f1f5f9; } .stem-code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; background: var(--paper, #f8fafc); padding: 2px 7px; border-radius: 5px; font-size: 13px; color: var(--blue, #2456e8); word-break: break-all; } html[data-xunl-theme="dark"] .stem-code { background: #0b1324; } .stem-verdict-badge { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; background: rgba(36,86,232,0.1); color: var(--blue, #2456e8); border: 1px solid rgba(36,86,232,0.2); } .stem-learning-path { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; background: var(--paper, #f8fafc); border: 1px solid var(--line, #e2e8f0); border-radius: 12px; margin: 20px 0; flex-wrap: wrap; } html[data-xunl-theme="dark"] .stem-learning-path { background: #17253b; border-color: #293b56; } .stem-path-link { font-size: 14px; font-weight: 600; color: var(--blue, #2456e8); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .stem-path-link:hover { text-decoration: underline; } .stem-path-badge { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: rgba(36, 86, 232, 0.08); color: var(--blue, #2456e8); } .stem-reciprocal-box { margin: 20px 0; padding: 14px 18px; background: var(--paper, #f8fafc); border: 1px solid var(--line, #e2e8f0); border-radius: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } html[data-xunl-theme="dark"] .stem-reciprocal-box { background: #17253b; border-color: #293b56; } .stem-reciprocal-label { font-size: 13px; color: var(--muted, #64748b); font-weight: 500; } .stem-reciprocal-link { font-size: 14px; font-weight: 600; color: var(--blue, #2456e8); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .stem-reciprocal-link:hover { text-decoration: underline; } .lp-delivery { border: 1px solid var(--line, #e2e8f0); border-radius: 16px; background: var(--white, #ffffff); padding: 20px 24px; margin-bottom: 22px; box-shadow: 0 6px 20px rgba(0,0,0,0.03); } html[data-xunl-theme="dark"] .lp-delivery { background: #111c2d; border-color: #293b56; } .stem-btn-reveal { padding: 4px 12px; border-radius: 6px; border: 1px solid var(--blue, #2456e8); background: #eff6ff; color: var(--blue, #2456e8); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s ease; } .stem-btn-reveal:hover { background: var(--blue, #2456e8); color: #ffffff; } /* Mobile Touch Optimization (375px) */ @media (max-width: 500px) { .lp-page { padding: 0 12px; overflow-x: hidden; } .stem-btn, .stem-preset-pill, .stem-cam-btn, .stem-btn-play, .stem-btn-ctrl, .stem-btn-action { min-height: 44px; } .stem-canvas { touch-action: pan-y; } } /* Breadcrumbs list normalization */ .breadcrumbs ol { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; list-style: none !important; margin: 0 !important; padding: 0 !important; } .breadcrumbs ol li { display: inline-flex !important; align-items: center !important; gap: 8px !important; list-style: none !important; } /* Featured 3D Labs Showcase on Category Page */ .featured-3d-section { margin: 32px 0 36px 0; padding: 24px; background: var(--white, #ffffff); border: 1px solid var(--line, #e2e8f0); border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); } html[data-xunl-theme="dark"] .featured-3d-section { background: #111c2d; border-color: #293b56; } .featured-3d-header { margin-bottom: 20px; } .featured-3d-header h2 { font-size: 1.45rem; font-weight: 800; margin: 0 0 6px 0; letter-spacing: -0.02em; } .featured-3d-header p { font-size: 0.92rem; color: var(--muted, #64748b); margin: 0; } .featured-3d-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; } .featured-3d-card { display: flex; flex-direction: column; background: var(--paper, #f8fafc); border: 1px solid var(--line, #e2e8f0); border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } html[data-xunl-theme="dark"] .featured-3d-card { background: #17253b; border-color: #293b56; } .featured-3d-card:hover { transform: translateY(-4px); border-color: var(--blue, #2456e8); box-shadow: 0 12px 28px rgba(36, 86, 232, 0.12); } .featured-3d-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; background: radial-gradient(circle at 50% 35%, #1e293b 0%, #0b111e 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; } .featured-3d-thumb svg { width: 100%; height: 100%; display: block; } .featured-3d-badge { position: absolute; top: 10px; right: 10px; padding: 3px 8px; border-radius: 999px; background: rgba(16, 185, 129, 0.2); border: 1px solid rgba(16, 185, 129, 0.4); color: #34d399; font-size: 11px; font-weight: 700; backdrop-filter: blur(4px); } .featured-3d-orbit { position: absolute; bottom: 10px; left: 10px; padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.65); color: #93c5fd; font-size: 11px; font-weight: 600; backdrop-filter: blur(4px); } .featured-3d-body { padding: 16px 18px 18px 18px; display: flex; flex-direction: column; flex: 1; } .featured-3d-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .featured-3d-tag { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px; background: rgba(36, 86, 232, 0.1); color: var(--blue, #2456e8); } .featured-3d-title { font-size: 1.12rem; font-weight: 700; margin: 0 0 8px 0; line-height: 1.35; } .featured-3d-desc { font-size: 0.85rem; color: var(--muted, #64748b); line-height: 1.55; margin: 0 0 14px 0; flex: 1; } .featured-3d-cta { font-size: 13px; font-weight: 700; color: var(--blue, #2456e8); display: inline-flex; align-items: center; gap: 4px; } /* Category Grid Card Thumbnails */ .cat-tool-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; transition: transform .2s ease, box-shadow .2s ease; } .cat-tool-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.06); } .cat-card-thumb { width: 100%; aspect-ratio: 16 / 9; background: radial-gradient(circle at 50% 30%, #1e293b 0%, #0f172a 100%); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .cat-card-thumb svg { width: 100%; height: 100%; } .cat-card-content { padding: 14px 16px; display: flex; flex-direction: column; flex: 1; } /* Share Card Modal & Visual Poster */ .stem-share-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; } .stem-share-modal.active { opacity: 1; visibility: visible; } .stem-share-backdrop { position: absolute; inset: 0; background: rgba(11, 17, 30, 0.78); backdrop-filter: blur(8px); } .stem-share-dialog { position: relative; z-index: 1; width: 100%; max-width: 640px; background: #0f172a; border: 1px solid #334155; border-radius: 18px; padding: 22px; box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(56, 189, 248, 0.15); color: #f8fafc; display: flex; flex-direction: column; gap: 16px; max-height: 90vh; overflow-y: auto; } .stem-share-header { display: flex; justify-content: space-between; align-items: flex-start; position: relative; } .stem-share-badge { font-size: 11px; font-weight: 700; color: #38bdf8; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; } .stem-share-heading { font-size: 1.25rem; font-weight: 700; margin: 0; color: #f8fafc; } .stem-share-close { background: #1e293b; border: 1px solid #334155; color: #94a3b8; font-size: 16px; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s ease; } .stem-share-close:hover { background: #334155; color: #ffffff; } .stem-share-preview-wrap { width: 100%; background: #090d16; border: 1px solid #1e293b; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 2px 8px rgba(0,0,0,0.4); } .stem-share-card-canvas { width: 100%; height: auto; max-height: 320px; display: block; object-fit: contain; } .stem-share-url-box { display: flex; gap: 8px; } .stem-share-url-input { flex: 1; background: #1e293b; border: 1px solid #334155; color: #e2e8f0; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12px; padding: 8px 12px; border-radius: 8px; } .stem-share-actions { display: flex; gap: 10px; flex-wrap: wrap; } .stem-share-btn-dl { background: #2456e8; color: #ffffff; border: 0; padding: 10px 16px; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background .15s ease; } .stem-share-btn-dl:hover { background: #1d4ed8; } .stem-share-btn-share { background: #1e293b; border: 1px solid #475569; color: #f8fafc; padding: 10px 16px; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background .15s ease; } .stem-share-btn-share:hover { background: #334155; } .stem-share-status { font-size: 12px; color: #34d399; min-height: 18px; } /* Responsive Desktop 1-Screen Side-by-Side Simulation Workspace */ .stem-workspace-split { display: block; margin-bottom: 24px; } .stem-split-stage { min-width: 0; } .stem-split-controls { min-width: 0; } @media (min-width: 860px) { .tool-heading { margin: 4px 0 10px; } .tool-heading h1 { font-size: 26px; margin: 2px 0 4px; } .tool-heading p:not(.eyebrow) { font-size: 14px; line-height: 1.45; margin: 0 0 6px; } .stem-coppa-banner { padding: 6px 12px; margin-bottom: 10px; font-size: 0.8rem; } .stem-workspace-split { display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(360px, 1fr); gap: 20px; align-items: start; } .stem-split-stage { position: sticky; top: 72px; z-index: 20; } .stem-split-stage .stem-stage-wrap { margin-bottom: 0; padding: 14px 16px; } .stem-split-stage .stem-canvas-container { aspect-ratio: 16 / 10; max-height: min(420px, 50vh); min-height: 300px; } .stem-split-stage .stem-playback-bar { margin-top: 10px; padding: 8px 12px; } .stem-split-controls { display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 86px); overflow-y: auto; overflow-x: hidden; padding-right: 4px; scrollbar-width: thin; } .stem-split-controls::-webkit-scrollbar { width: 6px; } .stem-split-controls::-webkit-scrollbar-thumb { background: var(--line, #cbd5e1); border-radius: 999px; } html[data-xunl-theme="dark"] .stem-split-controls::-webkit-scrollbar-thumb { background: #334155; } .stem-split-controls .stem-presets-bar { margin-bottom: 0; padding: 8px 12px; border-radius: 12px; display: flex; flex-direction: column; gap: 6px; align-items: stretch; } .stem-split-controls .stem-presets-label { font-size: 12px; } .stem-split-controls .stem-presets-list { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .stem-split-controls .stem-preset-pill { flex-shrink: 0; white-space: nowrap; font-size: 12px; padding: 5px 12px; } .stem-split-controls .stem-workbench { display: flex; flex-direction: column; margin: 0; border-radius: 16px; box-shadow: 0 8px 24px rgba(23,42,71,.04); } .stem-split-controls .lp-form { border-right: none; border-bottom: 1px solid var(--line, #e2e8f0); padding: 16px 18px; } html[data-xunl-theme="dark"] .stem-split-controls .lp-form { border-bottom-color: #293b56; } .stem-split-controls .lp-output { padding: 16px 18px; } .stem-split-controls .lp-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .stem-split-controls .stem-kpi-card { padding: 10px 12px; } .stem-split-controls .stem-kpi-val { font-size: 18px; } .stem-split-controls .stem-control-row { margin-bottom: 12px; } .stem-split-controls .lp-section-title { font-size: 14px; margin-bottom: 10px; } } /* Preset active highlight pulse */ @keyframes stemControlPulse { 0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.8); background-color: rgba(56, 189, 248, 0.15); } 50% { box-shadow: 0 0 0 8px rgba(56, 189, 248, 0.25); background-color: rgba(56, 189, 248, 0.1); } 100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); background-color: transparent; } } .stem-control-highlight { animation: stemControlPulse 1.4s ease-out; border-radius: 8px; transition: background-color 0.3s; } /* ========================================================================== Projector / presentation mode (投屏演示模式) One selector per rule: an unknown vendor pseudo-class in a selector list drops the whole rule. ========================================================================== */ body.stem-projector-active { overflow: hidden !important; } body.stem-projector-active #stem-stage-section { --stem-proj-scale: 1; position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-width: none !important; margin: 0 !important; padding: 12px 18px !important; border: none !important; border-radius: 0 !important; background: #070b16 !important; box-shadow: none !important; z-index: 2147483000 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) clamp(260px, 24vw, 460px); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "header header" "canvas hud" "playback hud"; gap: 10px 16px; box-sizing: border-box !important; color: #f8fafc; } body.stem-projector-active #stem-stage-section .stem-stage-header { grid-area: header; margin: 0 !important; padding: 0 4px !important; } body.stem-projector-active #stem-stage-section .stem-stage-title { font-size: 22px !important; color: #f8fafc !important; } body.stem-projector-active #stem-stage-section .stem-badge-live { display: none !important; } body.stem-projector-active #stem-stage-section .stem-btn-action { font-size: 15px !important; padding: 6px 14px !important; min-height: 40px !important; } body.stem-projector-active #stem-btn-share, body.stem-projector-active #stem-btn-print { display: none !important; } body.stem-projector-active #stem-btn-projector { background: #ef4444 !important; color: #fff !important; border-color: #ef4444 !important; font-weight: 700 !important; } body.stem-projector-active #stem-stage-section .stem-canvas-container { grid-area: canvas; width: 100% !important; height: 100% !important; max-height: none !important; min-height: 0 !important; aspect-ratio: auto !important; border-radius: 12px !important; background: #0b1120 !important; display: flex !important; align-items: center !important; justify-content: center !important; } body.stem-projector-active #stem-stage-section canvas.stem-canvas { width: 100% !important; height: 100% !important; object-fit: contain !important; touch-action: none !important; } body.stem-projector-active #stem-stage-section .stem-playback-bar { grid-area: playback; margin: 0 !important; padding: 8px 14px !important; background: rgba(15, 23, 42, 0.9) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 12px !important; } body.stem-projector-active #stem-stage-section .stem-playback-bar .stem-btn { font-size: 16px !important; min-height: 44px !important; } .stem-proj-hud, .stem-proj-help, .stem-proj-hint { display: none; } body.stem-projector-active .stem-proj-hud { grid-area: hud; display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; font-size: calc(16px * var(--stem-proj-scale)); } .stem-proj-kpis { display: grid; grid-template-columns: 1fr; gap: 8px; } .stem-proj-kpi, .stem-proj-verdict, .stem-proj-formula, .stem-proj-presets { background: #0f172a; border: 1px solid #334155; border-radius: 12px; padding: 8px 12px; } .stem-proj-kpi-label { display: block; font-size: 0.8em; color: #cbd5e1; line-height: 1.3; } .stem-proj-kpi-value { display: block; font-size: 1.75em; line-height: 1.2; color: #fde047; font-variant-numeric: tabular-nums; word-break: break-word; } .stem-proj-verdict strong { display: block; font-size: 1.15em; color: #86efac; line-height: 1.35; } .stem-proj-formula code { display: block; font-size: 0.95em; color: #e2e8f0; white-space: pre-wrap; word-break: break-word; line-height: 1.45; } .stem-proj-preset-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .stem-proj-preset, .stem-proj-tool { min-height: 40px; padding: 4px 12px; border-radius: 10px; border: 1px solid #475569; background: #1e293b; color: #f1f5f9; font: inherit; font-size: 0.85em; cursor: pointer; } .stem-proj-preset[aria-pressed="true"] { background: #2563eb; border-color: #60a5fa; color: #fff; font-weight: 700; } .stem-proj-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; position: sticky; bottom: 0; padding-top: 4px; background: inherit; } body.stem-projector-active #stem-stage-section .stem-canvas-container { position: relative !important; } /* Scenario caption: opens in full at the top-left for ~9 s after a scenario change, then folds to one line so the canvas formula line at the bottom and the result chips at the top-right stay visible. Click toggles. */ body.stem-projector-active #stem-trap-banner:not([hidden]) { position: absolute; left: 12px; top: 12px; right: auto; bottom: auto; max-width: 62%; z-index: 2; margin: 0; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: calc(17px * var(--stem-proj-scale)); line-height: 1.45; padding: 10px 14px; border-radius: 10px; background: rgba(15, 23, 42, 0.88); color: #f8fafc; border: 1px solid rgba(251, 191, 36, 0.6); } body.stem-projector-active.stem-proj-banner-open #stem-trap-banner:not([hidden]) { white-space: normal; max-height: 9em; overflow-y: auto; } body.stem-projector-active.stem-proj-contrast #stem-trap-banner:not([hidden]) { background: rgba(255, 255, 255, 0.94); color: #0f172a; } .stem-proj-tool { min-width: 44px; font-weight: 700; } body.stem-projector-active .stem-proj-help:not([hidden]) { display: block; position: absolute; inset: 10% 20%; z-index: 5; overflow: auto; background: rgba(2, 6, 23, 0.96); border: 1px solid #60a5fa; border-radius: 16px; padding: 24px 32px; color: #f8fafc; font-size: 20px; } .stem-proj-help h3 { margin: 0 0 12px; font-size: 1.2em; } .stem-proj-help dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 0; } .stem-proj-help dt { font-weight: 700; color: #fde047; font-family: ui-monospace, monospace; } .stem-proj-help dd { margin: 0; } body.stem-projector-active .stem-proj-hint { display: block; position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); background: rgba(15, 23, 42, 0.85); color: #e2e8f0; padding: 6px 14px; border-radius: 999px; font-size: 14px; pointer-events: none; animation: stemProjHintFade 7s forwards; } @keyframes stemProjHintFade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } } body.stem-projector-active.stem-proj-idle .stem-proj-hint { opacity: 0; } body.stem-projector-active.stem-proj-idle #stem-stage-section { cursor: none; } body.stem-projector-active.stem-proj-hud-hidden #stem-stage-section { grid-template-columns: minmax(0, 1fr) 0; } body.stem-projector-active.stem-proj-hud-hidden .stem-proj-hud { display: none; } /* High-contrast light theme for washed-out projectors (like PhET's projector colour scheme) */ body.stem-projector-active.stem-proj-contrast #stem-stage-section { background: #ffffff !important; color: #0f172a; } body.stem-projector-active.stem-proj-contrast #stem-stage-section .stem-stage-title { color: #0f172a !important; } body.stem-projector-active.stem-proj-contrast #stem-stage-section .stem-canvas-container { background: #ffffff !important; } body.stem-projector-active.stem-proj-contrast canvas.stem-canvas { filter: invert(1) hue-rotate(180deg) contrast(1.15); } body.stem-projector-active.stem-proj-contrast .stem-proj-kpi, body.stem-projector-active.stem-proj-contrast .stem-proj-verdict, body.stem-projector-active.stem-proj-contrast .stem-proj-formula, body.stem-projector-active.stem-proj-contrast .stem-proj-presets { background: #f8fafc; border-color: #94a3b8; } body.stem-projector-active.stem-proj-contrast .stem-proj-kpi-label { color: #334155; } body.stem-projector-active.stem-proj-contrast .stem-proj-kpi-value { color: #1d4ed8; } body.stem-projector-active.stem-proj-contrast .stem-proj-verdict strong { color: #15803d; } body.stem-projector-active.stem-proj-contrast .stem-proj-formula code { color: #0f172a; } body.stem-projector-active.stem-proj-contrast .stem-proj-preset, body.stem-projector-active.stem-proj-contrast .stem-proj-tool { background: #e2e8f0; color: #0f172a; border-color: #64748b; } body.stem-projector-active.stem-proj-contrast .stem-proj-preset[aria-pressed="true"] { background: #1d4ed8; color: #fff; } /* 4:3 and portrait projectors: results move under the canvas */ @media (max-aspect-ratio: 3/2) { body.stem-projector-active #stem-stage-section { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "header" "canvas" "playback" "hud"; } body.stem-projector-active #stem-stage-section { padding: 8px 12px !important; gap: 6px 10px; } body.stem-projector-active #stem-stage-section .stem-stage-title-wrap { display: none !important; } body.stem-projector-active #stem-stage-section .stem-playback-bar .stem-btn { min-height: 38px !important; } body.stem-projector-active .stem-proj-hud { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; grid-template-areas: "kpis kpis kpis" "verdict formula formula" "presets presets tools"; max-height: 32vh; align-items: stretch; gap: 6px; font-size: calc(15px * var(--stem-proj-scale)); } body.stem-projector-active .stem-proj-preset { min-height: 34px; } body.stem-projector-active .stem-proj-tool { min-height: 34px; } body.stem-projector-active .stem-proj-kpis { grid-area: kpis; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; } body.stem-projector-active .stem-proj-kpi-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.stem-projector-active .stem-proj-kpi { padding: 4px 10px; } body.stem-projector-active .stem-proj-kpi-value { font-size: 1.4em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body.stem-projector-active .stem-proj-formula code { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } body.stem-projector-active #stem-stage-section .stem-playback-bar { padding: 4px 10px !important; } body.stem-projector-active .stem-proj-verdict { grid-area: verdict; padding: 4px 10px; } body.stem-projector-active .stem-proj-formula { grid-area: formula; padding: 4px 10px; } body.stem-projector-active .stem-proj-presets { grid-area: presets; min-width: 0; padding: 4px 10px; display: flex; align-items: center; gap: 8px; } body.stem-projector-active .stem-proj-presets > .stem-proj-kpi-label { flex: 0 0 auto; } body.stem-projector-active .stem-proj-presets .stem-proj-preset-row { flex: 1 1 auto; min-width: 0; margin-top: 0; } body.stem-projector-active .stem-proj-preset { max-width: 46%; overflow: hidden; text-overflow: ellipsis; } body.stem-projector-active .stem-proj-preset-row { flex-wrap: nowrap; overflow-x: auto; } body.stem-projector-active .stem-proj-preset { white-space: nowrap !important; } body.stem-projector-active .stem-proj-tools { margin-top: 0; position: static; align-items: center; grid-area: tools; flex-wrap: nowrap; } body.stem-projector-active.stem-proj-hud-hidden #stem-stage-section { grid-template-columns: minmax(0, 1fr); } /* The stage title row is hidden here, so the canvas title sits at the very top of the canvas: keep the caption below it, and show the shortcut hint in the header row instead of over the result cards / substitution line. */ body.stem-projector-active #stem-trap-banner:not([hidden]) { top: 34px; } body.stem-projector-active .stem-proj-help:not([hidden]) { inset: 6% 8%; font-size: 17px; padding: 18px 26px; } body.stem-projector-active .stem-proj-hint { top: 14px; bottom: auto; left: auto; right: 16px; transform: none; max-width: 52%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* 720p-class projectors: tighter result cards so the preset list fits in the side panel */ @media (max-height: 820px) and (min-aspect-ratio: 3/2) { body.stem-projector-active .stem-proj-hud { gap: 6px; } body.stem-projector-active .stem-proj-kpis { gap: 6px; } body.stem-projector-active .stem-proj-kpi, body.stem-projector-active .stem-proj-verdict, body.stem-projector-active .stem-proj-formula, body.stem-projector-active .stem-proj-presets { padding: 4px 10px; } body.stem-projector-active .stem-proj-kpi-value { font-size: 1.45em; } body.stem-projector-active .stem-proj-preset { min-height: 36px; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-align: left; } body.stem-projector-active .stem-proj-preset-row { flex-direction: column; flex-wrap: nowrap; } body.stem-projector-active .stem-proj-tool { min-height: 36px; } } /* Short screens (phones in landscape, 720p with browser chrome) */ @media (max-height: 560px) { body.stem-projector-active #stem-stage-section { padding: 6px 10px !important; gap: 6px 10px; } body.stem-projector-active #stem-camera-tabs, body.stem-projector-active #stem-stage-section .stem-stage-title-wrap { display: none !important; } body.stem-projector-active .stem-proj-hud { font-size: calc(13px * var(--stem-proj-scale)); } body.stem-projector-active .stem-proj-hint { display: none; } } /* Long toggle labels (de/ru) must not break mid-word next to the card title */ .stem-derivation-header { gap: 8px; } .stem-derivation-header > span { min-width: 0; overflow-wrap: anywhere; } .stem-derivation-header .stem-btn { white-space: nowrap; flex-shrink: 0; } /* Long es/de/pt/ru preset names and captions: hyphenate at syllables (uses ) instead of breaking mid-word. */ .stem-preset-name, .stem-proj-preset, #stem-trap-banner { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } /* bundled source: stem-kids.css */ /* XunL primary-school STEM games — kid template (tablet-first, large touch targets). */ .kids-app{--k-blue:#2563eb;--k-ink:#0f172a;--k-muted:#475569;--k-card:#fff;--k-bg:#f0f7ff;--k-line:#cbd5e1;--k-ok:#16a34a;--k-bad:#dc2626;--k-star:#f59e0b;--cell:56px; position:relative;margin:8px 0 28px;border-radius:24px;background:var(--k-bg);border:2px solid #bfdbfe;padding:14px;color:var(--k-ink);font-size:18px;line-height:1.5;box-shadow:0 10px 30px rgba(37,99,235,.08)} [data-xunl-theme=dark] .kids-app{--k-bg:#eef5ff} .kids-app *{box-sizing:border-box} .kids-topbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:10px} .kids-modes{display:flex;gap:8px;flex-wrap:wrap} .kids-mode{min-height:52px;padding:8px 18px;border-radius:16px;border:2px solid #bfdbfe;background:#fff;font-weight:800;font-size:18px;color:#1e3a8a;cursor:pointer} .kids-mode.active{background:var(--k-blue);border-color:var(--k-blue);color:#fff;box-shadow:0 4px 0 #1e40af} .kids-tools{display:flex;gap:8px;flex-wrap:wrap} .kids-btn{min-height:48px;padding:8px 16px;border-radius:14px;border:2px solid var(--k-line);background:#fff;color:var(--k-ink);font-weight:700;font-size:17px;cursor:pointer;touch-action:manipulation;transition:transform .08s} .kids-btn:active{transform:translateY(2px)} .kids-btn-primary{background:#22c55e;border-color:#16a34a;color:#fff;box-shadow:0 4px 0 #15803d} .kids-btn-lg{min-height:58px;font-size:19px} .kids-btn-next{display:block;margin:14px auto 0;background:var(--k-blue);border-color:#1d4ed8;color:#fff;font-size:20px;min-height:58px;padding:10px 28px;box-shadow:0 4px 0 #1e40af} .kids-levels{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:thin} .kids-level{flex:0 0 auto;display:flex;align-items:center;gap:8px;min-height:52px;padding:6px 14px;border-radius:16px;border:2px solid #fde68a;background:#fffbeb;font-weight:700;color:#78350f;cursor:pointer} .kids-level.active{border-color:#f59e0b;background:#fef3c7;box-shadow:0 3px 0 #d97706} .kids-level-n,.kids-level-card-n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#f59e0b;color:#fff;font-weight:900} .kids-level-stars{color:var(--k-star);letter-spacing:1px;white-space:nowrap}.kids-level-stars i{color:#d6d3d1;font-style:normal} .kids-level-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px} .kids-level-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px;border-radius:20px;border:2px solid #fde68a;background:#fffbeb;text-align:left;cursor:pointer;min-height:140px;font:inherit;color:inherit} .kids-level-card strong{font-size:19px}.kids-level-card small{color:var(--k-muted);font-size:15px} .kids-progress{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px;font-weight:700;color:#1e3a8a} .kids-dot{width:18px;height:18px;border-radius:50%;background:#dbeafe;border:2px solid #93c5fd}.kids-dot.done{background:#22c55e;border-color:#16a34a}.kids-dot.now{background:#fde047;border-color:#eab308;transform:scale(1.2)} .kids-progress-miss{margin-left:auto;color:#b45309} .kids-stage{background:#fff;border-radius:20px;border:2px solid #dbeafe;padding:14px;min-height:340px;overflow:hidden} .kids-feedback{display:flex;gap:10px;align-items:flex-start;margin-top:10px;padding:12px 16px;border-radius:16px;background:#fff;border:2px solid #dbeafe;min-height:56px;font-size:18px;font-weight:600} .kids-feedback.pop{animation:kpop .35s ease} .kids-fb-icon{font-size:26px;line-height:1} .kids-fb-ok{border-color:#86efac;background:#f0fdf4}.kids-fb-bad{border-color:#fca5a5;background:#fef2f2}.kids-fb-hint{border-color:#fde68a;background:#fffbeb}.kids-fb-star{border-color:#fcd34d;background:#fef9c3} @keyframes kpop{0%{transform:scale(.97)}60%{transform:scale(1.02)}100%{transform:scale(1)}} .kids-task-q{font-size:21px;font-weight:700;margin:0 0 12px} .kids-big{font-size:28px;font-weight:900;color:#1d4ed8;white-space:nowrap} .kids-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:10px 0} .kids-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:12px} .kids-field{display:flex;flex-direction:column;font-size:15px;font-weight:700;color:var(--k-muted)} .kids-input{width:130px;min-height:52px;font-size:24px;font-weight:800;border-radius:12px;border:2px solid var(--k-line);padding:4px 10px;text-align:center} .kids-seg{display:inline-flex;border-radius:14px;border:2px solid #bfdbfe;overflow:hidden;background:#fff} .kids-seg-btn{min-width:56px;min-height:52px;padding:6px 14px;border:0;background:#fff;font-size:22px;font-weight:800;color:#1e3a8a;cursor:pointer;border-right:2px solid #dbeafe} .kids-seg-btn:last-child{border-right:0}.kids-seg-btn.active{background:#dbeafe;color:#1d4ed8} .kids-playbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0} .kids-speed{display:inline-flex;gap:6px;align-items:center;font-weight:700;color:var(--k-muted)}.kids-speed select{min-height:44px;font-size:16px;border-radius:10px} .kids-pb-count{font-weight:800;color:var(--k-muted)} .kids-slider{display:flex;flex-direction:column;gap:4px;font-weight:700;margin:10px 0} .kids-slider input[type=range]{width:100%;height:40px;accent-color:#2563eb} .kids-stepper{display:inline-flex;align-items:center;gap:8px;font-weight:800;margin:4px 10px 4px 0} .kids-stepper button{width:52px;height:52px;border-radius:14px;border:2px solid #bfdbfe;background:#eff6ff;font-size:26px;font-weight:900;color:#1d4ed8;cursor:pointer} .kids-stepper b{min-width:34px;text-align:center;font-size:26px} .kids-numpad{display:grid;grid-template-columns:repeat(3,minmax(64px,84px));gap:8px;margin:10px 0} .kids-key{min-height:60px;border-radius:14px;border:2px solid #cbd5e1;background:#f8fafc;font-size:26px;font-weight:800;color:var(--k-ink);cursor:pointer;box-shadow:0 3px 0 #cbd5e1;touch-action:manipulation} .kids-key:active{transform:translateY(2px);box-shadow:none}.kids-key-fn{background:#f1f5f9;font-size:22px} .kids-key-ok{grid-column:1/-1;background:#22c55e;border-color:#16a34a;color:#fff;box-shadow:0 3px 0 #15803d} .kids-answer-line{display:flex;align-items:center;gap:8px;font-size:24px;font-weight:800} .kids-answer-box{min-width:150px;min-height:58px;padding:6px 14px;border-radius:14px;border:3px solid #93c5fd;background:#eff6ff;font-size:30px;font-weight:900;color:#1d4ed8;display:inline-flex;align-items:center;justify-content:center} .kids-answer-box.empty{color:#93c5fd} .shake{animation:kshake .4s}@keyframes kshake{25%{transform:translateX(-8px)}50%{transform:translateX(8px)}75%{transform:translateX(-4px)}} .kids-choices{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0} .kids-choice{min-width:96px;min-height:64px;padding:8px 20px;border-radius:16px;border:3px solid #bfdbfe;background:#fff;font-size:24px;font-weight:900;color:#1e3a8a;cursor:pointer} .kids-choice.ok{border-color:#16a34a;background:#dcfce7}.kids-choice.bad{border-color:#dc2626;background:#fee2e2;animation:kshake .4s} .kids-result{text-align:center;padding:24px 10px} .kids-result-stars span{font-size:64px;color:#e7e5e4;display:inline-block}.kids-result-stars span.on{color:var(--k-star);animation:kstar .6s both} @keyframes kstar{0%{transform:scale(0) rotate(-40deg)}70%{transform:scale(1.25)}100%{transform:scale(1)}} .kids-result h3{font-size:28px;margin:8px 0}.kids-result-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} .kids-muted{color:var(--k-muted);font-size:15px} .kids-parent{background:#fff;border-radius:20px;border:2px solid #dbeafe;padding:16px} .kids-parent h3{font-size:19px;margin:16px 0 8px} .kids-parent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .kids-stat{background:#eff6ff;border-radius:16px;padding:12px;text-align:center}.kids-stat b{display:block;font-size:30px;color:#1d4ed8}.kids-stat span{font-size:15px;color:var(--k-muted)} .kids-weak{list-style:none;margin:0;padding:0}.kids-weak li{display:grid;grid-template-columns:minmax(120px,1.4fr) 2fr auto auto;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid #e2e8f0;font-size:16px} .kids-bar{height:14px;border-radius:7px;background:#e2e8f0;overflow:hidden}.kids-bar i{display:block;height:100%} .kids-wrong{width:100%;border-collapse:collapse;font-size:15px}.kids-wrong th,.kids-wrong td{padding:6px 8px;border-bottom:1px solid #e2e8f0;text-align:left;vertical-align:top}.kids-wrong td.bad{color:var(--k-bad);font-weight:800}.kids-wrong td.ok{color:var(--k-ok);font-weight:800} .kids-parent-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}.kids-parent-actions select{min-height:44px;font-size:16px;border-radius:10px;max-width:100%} /* ---- column arithmetic ---- */ .kca-grid{display:grid;grid-template-columns:repeat(var(--cols),var(--cell));gap:0;justify-content:center;margin:8px auto;font-variant-numeric:tabular-nums} .kca-cell{height:var(--cell);display:grid;place-items:center;font-size:calc(var(--cell)*.62);font-weight:800;color:#0f172a;border-radius:10px;transition:background .2s} .kca-cell.kca-small{height:calc(var(--cell)*.5);font-size:calc(var(--cell)*.36);color:#dc2626;align-items:end} .kca-op{color:#2563eb}.kca-bracket{font-size:calc(var(--cell)*.9);font-weight:400;color:#334155} .kca-slot{outline:2px dashed #cbd5e1;outline-offset:-5px} .kca-col-hi{background:#fef9c3} .kca-active{outline:3px solid #2563eb;outline-offset:-4px;background:#dbeafe;animation:kpulse 1.2s infinite} @keyframes kpulse{50%{outline-color:#93c5fd}} .kca-done{color:#15803d}.kca-shown{color:#b45309}.kca-auto{color:#dc2626}.kca-wrong{color:#dc2626;background:#fee2e2;animation:kshake .35s} .kca-pop{animation:kpop2 .35s}@keyframes kpop2{0%{transform:scale(.4)}70%{transform:scale(1.25)}100%{transform:scale(1)}} .kca-line-row{display:grid;grid-template-columns:repeat(var(--cols),var(--cell));height:6px}.kca-line{border-top:3px solid #0f172a;align-self:center} .kca-div .kca-under-bar{border-top:3px solid #0f172a;border-radius:0} .kca-pad{grid-template-columns:repeat(5,minmax(52px,70px));justify-content:center;margin:10px auto} .kca-explore{display:block}.kca-area{overflow-x:auto;padding:4px}.kca-note{color:var(--k-muted);font-size:15px;margin-top:6px} .kca-mode{margin-right:8px} /* ---- decimals ---- */ .kdp-chart-wrap{display:flex;flex-direction:column;align-items:center;gap:8px} .kdp-big{font-size:46px;font-weight:900;color:#1d4ed8;font-variant-numeric:tabular-nums} .kdp-read{font-size:18px;font-weight:700;color:#334155} .kdp-chart{display:flex;gap:6px;align-items:stretch;justify-content:center;justify-content:safe center;flex-wrap:nowrap;max-width:100%;overflow-x:auto;padding:4px} .kdp-col{display:flex;flex-direction:column;align-items:center;gap:4px;width:92px;padding:6px 4px;border-radius:16px;background:#f8fafc;border:2px solid #e2e8f0} .kdp-col-0,.kdp-col-1{background:#f5f3ff}.kdp-col-2{background:#eff6ff}.kdp-col-3{background:#f0fdf4}.kdp-col-4{background:#fff7ed}.kdp-col-5{background:#fdf2f8} .kdp-head{border:0;background:transparent;font-weight:800;font-size:15px;color:#334155;min-height:44px;cursor:pointer;line-height:1.2;padding:2px}.kdp-head small{display:block;color:#64748b;font-weight:700} .kdp-up,.kdp-down{width:58px;height:46px;border-radius:12px;border:2px solid #bfdbfe;background:#fff;font-size:20px;color:#1d4ed8;cursor:pointer} .kdp-digit{font-size:40px;font-weight:900;min-height:54px;color:#0f172a;font-variant-numeric:tabular-nums}.kdp-digit.kdp-dim{color:#cbd5e1} .kdp-bump{animation:kpop2 .3s} .kdp-beads{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;width:70px;min-height:20px}.kdp-beads i{width:12px;height:12px;border-radius:50%;background:#60a5fa} .kdp-col-3 .kdp-beads i{background:#22c55e}.kdp-col-4 .kdp-beads i{background:#f97316}.kdp-col-5 .kdp-beads i{background:#ec4899}.kdp-col-0 .kdp-beads i,.kdp-col-1 .kdp-beads i{background:#a78bfa} .kdp-point{display:flex;align-items:center;width:28px;font-size:64px;font-weight:900;color:#dc2626} .kdp-hi{border-color:#2563eb}.kdp-good{border-color:#16a34a;background:#dcfce7!important}.kdp-bad{border-color:#dc2626;background:#fee2e2!important} .kdp-pickable .kdp-col{cursor:pointer}.kdp-pickable .kdp-head{font-size:17px;min-height:56px;width:100%} .kdp-blocks{width:100%;max-width:900px;height:auto;background:#fff;border-radius:14px;border:2px solid #e2e8f0} .kdp-shift{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin:12px 0}.kdp-shift-label{font-weight:800} .kdp-compare{display:grid;grid-template-columns:1fr 1fr;gap:10px} /* ---- cuboid ---- */ .kcu-explore,.kcu-task-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:14px;align-items:start} .kcu-canvas{width:100%;height:auto;background:linear-gradient(#f8fafc,#eef2ff);border-radius:16px;border:2px solid #e2e8f0;cursor:grab;touch-action:none} .kcu-dims{display:flex;flex-wrap:wrap} .kcu-toggles{display:flex;gap:14px;flex-wrap:wrap;margin:8px 0;font-weight:700}.kcu-toggles input{width:22px;height:22px;vertical-align:middle} .kcu-kpis{display:grid;gap:8px} .kcu-kpi{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;text-align:left;padding:10px 12px;border-radius:14px;border:2px solid #e2e8f0;background:#fff;font:inherit;cursor:pointer;min-height:52px} .kcu-kpi[data-hi=tb]{border-left:10px solid #2563eb}.kcu-kpi[data-hi=fb]{border-left:10px solid #ea580c}.kcu-kpi[data-hi=lr]{border-left:10px solid #16a34a} .kcu-kpi i{font-style:normal;font-weight:900;color:#64748b} .kcu-total{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;padding:10px 12px;border-radius:14px;background:#eff6ff}.kcu-total b{font-size:22px;color:#1d4ed8}.kcu-total small{color:#64748b} /* ---- percent ---- */ .kpd-explore{display:grid;grid-template-columns:1fr 1fr;gap:14px} .kpd-panel h3{margin:0 0 8px;font-size:19px} .kpd-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;width:100%;max-width:360px;aspect-ratio:1;touch-action:none;user-select:none} .kpd-cell{border-radius:4px;background:#e2e8f0;border:1px solid #cbd5e1;cursor:pointer}.kpd-cell.on{background:#f97316;border-color:#c2410c} .kpd-grid .kpd-cell:nth-child(10n+5){margin-right:2px} .kpd-grid-info{font-size:20px;margin:8px 0;font-weight:700}.kpd-grid-info b{color:#c2410c} .kpd-tag{display:inline-flex;align-items:center;gap:12px;padding:10px 16px;border-radius:16px;background:#fff7ed;border:2px dashed #fb923c;margin:6px 0} .kpd-item{font-size:44px}.kpd-old{text-decoration:line-through;color:#94a3b8;font-size:20px}.kpd-new{font-size:30px;font-weight:900;color:#dc2626}.kpd-badge{background:#dc2626;color:#fff;border-radius:10px;padding:2px 10px;font-weight:800} .kpd-bar{margin:10px 0}.kpd-bar-top{font-weight:700;font-size:16px;margin-bottom:4px} .kpd-segs{display:grid;grid-template-columns:repeat(10,1fr);gap:2px;height:44px}.kpd-seg{background:repeating-linear-gradient(45deg,#e2e8f0,#e2e8f0 6px,#f8fafc 6px,#f8fafc 12px);border-radius:6px;overflow:hidden}.kpd-seg i{display:block;height:100%;background:#22c55e} .kpd-bar-legend{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-weight:700;margin-top:4px}.kpd-bar-legend .pay{color:#15803d}.kpd-bar-legend .save{color:#64748b} .kpd-formula{font-size:18px;background:#f8fafc;border-radius:12px;padding:10px 12px}.kpd-formula b{color:#1d4ed8} .kpd-deals{display:flex;gap:12px;flex-wrap:wrap}.kpd-deal{padding:12px 18px;border-radius:16px;border:2px solid #fdba74;background:#fff7ed;font-size:20px;font-weight:700} .kpd-task-grid{display:flex;flex-direction:column;align-items:center} /* ---- circuit ---- */ .kc-explore{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(220px,1fr);gap:14px;align-items:start} .kc-svg{width:100%;height:auto;display:block;touch-action:none;user-select:none} .kc-desk{fill:#fef3c7;stroke:#fcd34d;stroke-width:3} .kc-wire{fill:none;stroke:#ef4444;stroke-width:8;stroke-linecap:round;pointer-events:none}.kc-wire.kc-blue{stroke:#3b82f6}.kc-wire.kc-yellow{stroke:#eab308}.kc-wire.kc-black{stroke:#1f2937}.kc-wire.kc-test{stroke:#8b5cf6;stroke-dasharray:14 8} .kc-wire-draft{stroke:#64748b;stroke-dasharray:12 8} .kc-wire-hit{fill:none;stroke:transparent;stroke-width:30;cursor:pointer} .kc-flow{fill:none;stroke:#fef08a;stroke-width:4;stroke-linecap:round;stroke-dasharray:2 22;animation:kcflow 1s linear infinite;pointer-events:none} @keyframes kcflow{to{stroke-dashoffset:-24}} .kc-term{fill:rgba(37,99,235,.18);stroke:#2563eb;stroke-width:3;cursor:crosshair}.kc-term:hover{fill:rgba(37,99,235,.45)} .kc-part{cursor:grab} .kc-label{font:700 18px system-ui,sans-serif;fill:#fff;text-anchor:middle}.kc-sw .kc-label{fill:#78350f}.kc-light{fill:#e0e7ff} .kc-sign{font:900 24px system-ui,sans-serif;fill:#0f172a;text-anchor:middle} .kc-tiny{font:700 15px system-ui,sans-serif;fill:#475569} .kc-obj{font-size:40px;text-anchor:middle} .kc-warn rect{fill:#dc2626}.kc-warn text{font:800 22px system-ui,sans-serif;fill:#fff;text-anchor:middle} .kc-status{display:inline-block;margin:0 0 8px;padding:6px 14px;border-radius:12px;font-weight:800;background:#e2e8f0}.kc-st-lit{background:#fef08a;color:#854d0e}.kc-st-short{background:#fee2e2;color:#b91c1c}.kc-st-open{background:#e2e8f0;color:#334155} .kc-side h3{font-size:17px;margin:4px 0 8px} .kc-tray{display:flex;flex-wrap:wrap;gap:8px}.kc-tray h3{width:100%} .kc-objs{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}.kc-objs h3{width:100%} .kc-obj-btn{display:flex;flex-direction:column;align-items:center;min-width:64px;min-height:64px;border-radius:14px;border:2px solid #e2e8f0;background:#fff;font-size:28px;cursor:pointer}.kc-obj-btn small{font-size:12px;font-weight:700}.kc-obj-btn.active{border-color:#2563eb;background:#dbeafe} .kc-legend{margin-top:14px}.kc-symbols{width:100%;max-width:300px;background:#fff;border-radius:12px;border:2px solid #e2e8f0}.kc-sym-t{font:700 16px system-ui,sans-serif;fill:#0f172a} .kc-predict{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .kc-predict-card{position:relative;border:3px solid #e2e8f0;border-radius:16px;background:#fff;padding:4px;cursor:pointer} .kc-predict-card b{position:absolute;left:10px;top:6px;font-size:24px;color:#1d4ed8;z-index:2} .kc-predict-card.ok{border-color:#16a34a}.kc-predict-card.bad{border-color:#dc2626} .kc-tools{margin:0 0 8px} /* ---- projector ---- */ .kids-main .kids-heading{margin-bottom:6px}.kids-main .kids-heading h1{font-size:clamp(1.35rem,2.6vw,2rem);margin:2px 0 4px} .kids-intro{margin:6px 0 10px}.kids-lead{font-size:1.02rem;color:var(--muted,#475569);margin:0 0 8px;max-width:72ch} .kids-privacy{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;padding:10px 14px;margin:0 0 18px;border-radius:12px;background:#f0fdf4;border:1px solid #bbf7d0;color:#14532d;font-size:.9rem;line-height:1.5} .kids-privacy-tag{flex:0 0 auto;padding:2px 10px;border-radius:999px;background:#16a34a;color:#fff;font-weight:700;font-size:.8rem} .kids-lang-note{margin:8px 2px 0;font-size:14px;color:#64748b} .kids-info p{max-width:80ch}.kids-how{padding-left:1.3em}.kids-how li{margin:4px 0} body.kids-present{overflow:hidden} body.kids-present .kids-app{position:fixed;inset:0;z-index:9999;margin:0;border-radius:0;border:0;overflow:auto;font-size:22px;--cell:76px;padding:18px 24px} body.kids-present .kids-stage{min-height:60vh} body.kids-present .kids-feedback{font-size:24px} body.kids-present .kids-task-q{font-size:28px} /* ---- responsive (tablet first; phones stack) ---- */ @media (max-width:900px){.kcu-explore,.kcu-task-row,.kc-explore,.kpd-explore{grid-template-columns:1fr}.kids-app{--cell:50px}} @media (max-width:560px){.kids-app{padding:8px;border-radius:16px;--cell:40px;font-size:16px}.kids-stage{padding:8px}.kids-mode{padding:6px 10px;font-size:16px}.kdp-chart{gap:3px;padding:2px}.kdp-col{width:auto;min-width:0;flex:1 1 0;padding:4px 2px;border-width:1px}.kdp-digit{font-size:30px}.kdp-up,.kdp-down{width:44px}.kdp-point{width:12px;font-size:40px}.kids-parent-grid{grid-template-columns:1fr}.kids-weak li{grid-template-columns:1fr 1fr auto}.kids-weak li small{display:none}.kc-predict{grid-template-columns:1fr}.kids-big{font-size:22px}.kids-numpad{grid-template-columns:repeat(3,1fr)}.kca-pad{grid-template-columns:repeat(5,1fr)}.kdp-head{font-size:12px}} /* ---- print: only the worksheet ---- */ .kids-print{display:none} @media print{ body.kids-printing>*:not(.kids-print){display:none!important} body.kids-printing .kids-print{display:block;color:#000;font:14pt/1.6 "PingFang SC","Microsoft YaHei",system-ui,sans-serif} .kids-print header h1{font-size:20pt;margin:0 0 4px}.kids-print-meta{display:flex;gap:28px;margin:8px 0 14px} .kids-print-list{columns:2;column-gap:28px;padding-left:22px}.kids-print-list li{break-inside:avoid;margin:0 0 18px} .kca-ws li{margin-bottom:28px}.kca-ws .ws-work{display:block;height:120px;border:1px dashed #999;margin-top:6px} .ws-grid{display:block;width:110px;height:110px;margin-top:6px;background-image:linear-gradient(#999 1px,transparent 1px),linear-gradient(90deg,#999 1px,transparent 1px);background-size:11px 11px;border:1px solid #333} .kids-print-key{break-before:page}.kids-print-key ol{columns:2;font-size:12pt} .kids-print footer{margin-top:16px;font-size:10pt;color:#555} @page{size:A4;margin:16mm} }