/* Effect articles and demonstration shell; scenes live in site-effect-runtime.css. */
.effects-page { padding-top:72px; background:#faf7f1; color:#465650; }
.effects-page [hidden],.effects-demo-body [hidden] { display:none!important; }
.effects-page button { cursor:pointer; }
.effects-hero { padding:62px 0 54px; background:#122725; color:#c2d0c8; overflow:hidden; }
.effects-hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.effects-breadcrumb { display:flex; gap:10px; flex-wrap:wrap; font-size:12px; color:#b9cbc4; margin-bottom:38px; }
.effects-breadcrumb a:hover { text-decoration:underline; }
.effects-kicker { display:block; color:#688979; font:600 11px/1.5 system-ui,sans-serif; letter-spacing:2px; }
.effects-hero .effects-kicker { color:#abc8ad; }
.effects-hero h1 { color:#f7f6ef; font-size:clamp(38px,4.2vw,64px); line-height:1.28; letter-spacing:-2px; margin:18px 0 22px; font-weight:650; }
.effects-hero h1 span { color:#c8ddb4; }
.effects-hero-copy>p { font-size:16px; line-height:1.9; }
.effects-hero-actions { display:flex; align-items:center; gap:26px; flex-wrap:wrap; margin-top:30px; }
.effects-light-link { font-size:14px; color:#d9e4dd; }
.effects-hero-notes { display:flex; flex-wrap:wrap; gap:18px; font-size:11px; color:#92afa0; margin-top:31px; }
.effects-hero-notes span:before { content:'·'; margin-right:7px; color:#bdd1a8; }
.effects-hero-art { min-width:0; position:relative; border:1px solid #59756755; border-radius:15px; background:#101920; box-shadow:0 35px 65px #0003; margin-top:40px; }
.effects-preview-chrome { display:flex; align-items:center; justify-content:space-between; height:40px; padding:0 16px; border-bottom:1px solid #fff1; color:#72918a; }
.effects-preview-chrome>span { display:flex; gap:5px; }.effects-preview-chrome i { width:6px; height:6px; border-radius:50%; background:#81948b; }.effects-preview-chrome i:first-child { background:#c78b70; }.effects-preview-chrome small { font:9px system-ui,sans-serif; letter-spacing:2px; }.effects-preview-chrome b { font:8px system-ui; color:#bed8a3; letter-spacing:1px; }
.effects-hero-stage { min-height:350px; border-radius:0 0 14px 14px; overflow:hidden; }
.effects-hero-caption { position:absolute; left:0; bottom:-31px; font-size:10px; letter-spacing:1px; color:#91a79c; }
.effects-static-art { position:relative; display:flex; min-height:inherit; height:100%; flex-direction:column; gap:12px; justify-content:center; align-items:center; padding:28px; background:radial-gradient(ellipse at 70% 20%,#6568ff70,transparent 60%),radial-gradient(ellipse at 20% 80%,#4ecbb72b,transparent 70%),#111c2b; color:#fff; text-align:center; overflow:hidden; }
.effects-static-art>span { font-size:11px; letter-spacing:4px; color:#bec7db; }.effects-static-art strong { color:#fff; font-size:32px; font-weight:600; }.effects-static-art p { max-width:500px; font-size:14px; color:#bccad0; }.effects-static-art small { font-size:12px; }
.effects-collection { padding:68px 0 72px; }
.effects-collection-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:28px; }.effects-collection h2,.effects-process h2 { margin:10px 0 8px; font-size:28px; font-weight:600; }.effects-collection-heading p { font-size:14px; color:#788078; }
.effects-search { display:flex; align-items:center; gap:9px; background:#fff; border:1px solid #d9dfd5; border-radius:8px; min-width:290px; padding:9px 13px; }.effects-search>span[aria-hidden] { font-size:25px; line-height:1; }.effects-search input { border:0; outline:0; min-width:0; width:100%; color:#24382e; background:transparent; font-size:13px; }.effects-search:focus-within { outline:2px solid #12746a; outline-offset:2px; }
.effects-filter-row { display:flex; gap:15px; align-items:center; justify-content:space-between; }.effects-filters { display:flex; gap:7px; flex-wrap:wrap; }.effects-filters button { padding:8px 15px; border:1px solid #dce2d7; border-radius:6px; background:transparent; color:#68776b; font-size:12px; }.effects-filters button span { margin-left:5px; opacity:.7; }.effects-filters button.is-active { background:#183b30; border-color:#183b30; color:#fff; }.effects-motion-button { border:0; background:transparent; color:#647e6b; font-size:12px; text-decoration:underline; white-space:nowrap; }
.effects-result { font-size:11px; color:#7a847a; padding:20px 0 17px; }
.effects-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:27px 24px; }
.effect-card { background:#fff; border:1px solid #e1e5db; border-radius:12px; min-width:0; overflow:hidden; transition:box-shadow .2s,border-color .2s; }.effect-card:hover,.effect-card:focus-within { border-color:#abc1ad; box-shadow:0 12px 34px #2a463410; }
.effect-cover { position:relative; height:224px; background:#101b25; overflow:hidden; }.effect-cover-canvas { width:100%; height:100%; overflow:hidden; }.effect-cover .fx-stage { width:800px; height:500px; min-height:500px; transform-origin:top left; pointer-events:none; }.effect-cover-link { position:absolute; inset:0; display:flex; justify-content:space-between; align-items:flex-start; padding:15px; }.effect-cover-badge { font-size:10px; background:#111c24aa; color:#e0e9e5; border:1px solid #fff2; border-radius:4px; padding:3px 8px; backdrop-filter:blur(5px); }.effect-cover-open { align-self:flex-end; font-size:10px; background:#f7f9f2; color:#263a31; border-radius:4px; padding:5px 10px; }.effect-cover-open span { margin-left:8px; }
.effect-card-body { padding:19px 21px 18px; }.effect-card-meta { display:flex; gap:8px; justify-content:space-between; color:#869083; font-size:10px; }.effect-card h3 { font-size:18px; margin:9px 0; font-weight:600; }.effect-card-body>p { font-size:12px; line-height:1.9; min-height:46px; color:#6b776d; }.effect-card-tags { display:flex; flex-wrap:wrap; gap:5px; margin:15px 0 19px; }.effect-card-tags span { color:#677764; background:#f4f6f0; font-size:10px; padding:2px 7px; border-radius:3px; }.effect-card-actions { display:flex; justify-content:space-between; align-items:center; gap:10px; border-top:1px solid #edf0e8; padding-top:14px; font-size:11px; color:#2d6854; }.effect-card-actions button { border:1px solid #d9e5d8; border-radius:4px; background:#fff; color:#627c65; padding:5px 9px; font-size:11px; }.effect-card-actions button[aria-pressed=true] { background:#e6f0e1; color:#25563a; border-color:#bfd3b9; }
.effects-empty { text-align:center; padding:75px 20px; }.effects-empty p { margin:10px 0 20px; }.effects-empty button { padding:8px 20px; border:1px solid #ccdac8; background:#fff; border-radius:6px; }
.effects-template-context { display:flex; gap:18px; align-items:center; justify-content:space-between; margin-bottom:34px; padding:18px 24px; background:#edf2e6; border:1px solid #d4dfc9; border-radius:9px; }.effects-template-context small { display:block; font-size:11px; color:#69865c; }.effects-template-context strong { display:block; color:#2b4a30; font-size:17px; margin:3px 0; }.effects-template-context p { font-size:12px; color:#748368; }.effects-template-context a { font-size:12px; color:#376e4c; white-space:nowrap; }
.effects-process { background:#eef1e7; padding:48px 0; }.effects-process>.container { display:grid; grid-template-columns:1fr 1.3fr; gap:50px; align-items:center; }.effects-process h2 { font-size:23px; }.effects-process p { font-size:12px; color:#72816d; }.effects-process ol { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; list-style:none; padding:0; margin:0; }.effects-process li>span { display:block; color:#91a584; font:28px/1.4 system-ui; margin-bottom:10px; }.effects-process strong { color:#324a33; font-size:13px; }.effects-process li p { font-size:11px; margin-top:6px; }
.effects-shortlist { position:fixed; z-index:90; bottom:20px; left:50%; transform:translateX(-50%); width:min(960px,calc(100% - 40px)); border:1px solid #c6d5bf; border-radius:12px; background:#fffffff5; box-shadow:0 12px 45px #193b3826; backdrop-filter:blur(12px); }.effects-shortlist>.container { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:14px 21px; }.effects-shortlist strong { color:#304d37; font-size:13px; }.effects-shortlist p { font-size:11px; color:#718268; max-width:600px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.effects-shortlist-actions { display:flex; gap:14px; align-items:center; white-space:nowrap; }.effects-shortlist-actions>button { padding:5px; border:0; background:none; font-size:12px; color:#73846a; }.effects-shortlist .qx-button { font-size:13px; min-height:40px; padding:6px 15px; }.effects-page.has-shortlist { padding-bottom:96px; }
.effects-detail-page { padding-top:106px; padding-bottom:65px; }.effects-breadcrumb-dark { color:#748373; margin-bottom:26px; }.effect-article-header { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-bottom:32px; }.effect-article-header h1 { margin:11px 0 14px; font-size:38px; font-weight:600; }.effect-article-header p { max-width:700px; font-size:15px; color:#71816d; }.effect-article-meta { display:flex; gap:20px; font-size:11px; color:#8c9586; margin-top:19px; }.effect-article-header>.qx-button { font-size:13px; white-space:nowrap; }
.effect-demo-panel { border:1px solid #dce3d5; border-radius:12px; overflow:hidden; background:#fff; }.effect-demo-toolbar { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:14px 21px; border-bottom:1px solid #e5eadf; }.effect-demo-toolbar h2 { font-size:13px; white-space:nowrap; }.effect-demo-toolbar h2 span { font:9px system-ui; letter-spacing:1px; color:#839577; margin-left:9px; }.effect-demo-tools { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }.effect-demo-tools>button,.effect-demo-tools>a { color:#667c60; font-size:11px; padding:4px 10px; border:1px solid #dce5d5; border-radius:5px; background:transparent; }.effect-device-controls { display:flex; padding:3px; border-radius:5px; background:#f0f3eb; }.effect-device-controls button { border:0; background:transparent; color:#809176; border-radius:4px; padding:3px 11px; font-size:11px; }.effect-device-controls button.is-active { color:#30573c; background:#fff; box-shadow:0 2px 4px #405b3210; }
.effect-demo-viewport { position:relative; display:flex; justify-content:center; min-width:0; background:repeating-linear-gradient(45deg,#e9eee4 0 6px,#eef2e9 6px 12px); padding:20px; }.effect-demo-frame { display:block; width:100%; height:470px; border:0; border-radius:8px; background:#102027; }.effect-demo-panel.is-mobile .effect-demo-frame { width:390px; max-width:100%; height:590px; border-radius:20px; box-shadow:0 12px 32px #10262529; }.effect-demo-error { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:10px; padding:20px; background:#eef2e9; color:#445541; font-size:13px; }.effect-demo-error a { color:#12746a; text-decoration:underline; }.effect-demo-foot { display:flex; gap:20px; justify-content:space-between; align-items:center; padding:14px 21px; }.effect-demo-foot p { font-size:12px; color:#76836d; }.effect-color-control { display:flex; align-items:center; gap:10px; white-space:nowrap; font-size:11px; color:#718369; }.effect-color-control input,.effect-standalone-toolbar input { width:25px; height:25px; padding:0; border:0; background:none; cursor:pointer; }.effect-reduced-note { margin:0; padding:0 21px 15px; font-size:11px; color:#7c896e; }
.effect-article-layout { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:90px; margin:55px 0; }.effect-article-body h2 { font-size:23px; margin-bottom:17px; font-weight:600; }.effect-article-body section { margin-bottom:35px; }.effect-article-body p { font-size:14px; line-height:2.1; margin-bottom:17px; }.effect-placement-list { display:flex; flex-wrap:wrap; gap:10px; }.effect-placement-list span { border:1px solid #dce6d3; padding:7px 17px; border-radius:5px; color:#67805b; font-size:12px; }.effect-tips li { position:relative; padding-left:19px; margin-bottom:11px; font-size:13px; line-height:1.9; color:#6d7d64; }.effect-tips li:before { content:'·'; position:absolute; left:0; color:#538366; font-weight:700; }.effect-origin { padding-top:20px; border-top:1px solid #e0e6d7; font-size:11px!important; color:#8e9885; }
.effect-article-aside { align-self:start; padding:26px; border:1px solid #dce5d2; border-radius:10px; background:#f0f3e8; }.effect-article-aside h2 { font-size:20px; margin:10px 0; }.effect-article-aside>p { font-size:12px; color:#75856b; }.effect-article-aside h3 { font-size:12px; margin-top:22px; }.effect-article-aside .qx-button { width:100%; font-size:13px; margin-top:20px; }.effect-custom-note { margin-top:14px; font-size:10px!important; }.effects-aside-template-link { display:block; font-size:11px; color:#477357; }.effect-aside-template { border-top:1px solid #dbe4d2; padding-top:16px; }.effect-aside-template small { display:block; color:#87947a; font-size:10px; }.effect-aside-template strong { display:block; font-size:13px; color:#445d3b; }.effect-aside-template a { font-size:10px; color:#5a7e57; }
.effect-related { border-top:1px solid #dce4d3; padding-top:32px; }.effect-related>h2 { font-size:23px; margin-bottom:22px; }.effect-related>div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }.effect-related a { position:relative; padding:22px; border:1px solid #dce4d4; border-radius:8px; background:#fff; }.effect-related a>span { font-size:10px; color:#889b7b; }.effect-related h3 { font-size:17px; margin:7px 0; }.effect-related p { font-size:12px; color:#7c8a72; }.effect-related b { position:absolute; top:22px; right:22px; color:#9cae8c; font-weight:400; }
.effects-demo-body { margin:0; background:#102027; color:#dce5e3; font:14px/1.7 'Microsoft YaHei','PingFang SC',system-ui,sans-serif; }.effects-demo-body * { box-sizing:border-box; }.effects-demo-body a { color:inherit; text-decoration:none; }.effects-demo-body button,.effects-demo-body input { font:inherit; }.effects-demo-body button { cursor:pointer; }.effects-demo-body a:focus-visible,.effects-demo-body button:focus-visible,.effects-demo-body input:focus-visible { outline:3px solid #b3d39a; outline-offset:3px; }
.effect-standalone-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:13px 24px; gap:15px; background:#162c2a; border-bottom:1px solid #ffffff18; }.effect-standalone-toolbar>a { font-size:12px; color:#afc1b5; }.effect-standalone-toolbar>strong { font-size:14px; font-weight:500; }.effect-standalone-toolbar>div { display:flex; gap:10px; align-items:center; }.effect-standalone-toolbar label { display:flex; gap:10px; align-items:center; font-size:11px; }.effect-standalone-toolbar button { color:#c0d2c8; padding:4px 12px; border:1px solid #6b8b7d55; border-radius:5px; background:transparent; font-size:12px; }
.effect-standalone-stage.fx-stage { height:calc(100vh - 120px); min-height:380px; width:100%; overflow-y:auto; overflow-x:hidden; }.effect-standalone-footer { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:12px 24px; color:#8ba99b; font-size:11px; }.effect-standalone-footer p { margin:0; }.effects-demo-body.is-embedded .effect-standalone-toolbar,.effects-demo-body.is-embedded .effect-standalone-footer { display:none; }.effects-demo-body.is-embedded .effect-standalone-stage { height:100vh; min-height:0; }.effect-standalone-stage.fx-stage .fx-scroll-window { height:100%; }
.library-effects-link { display:inline-flex; align-items:center; gap:8px; margin-top:20px; font-size:13px; color:#47785c; }.preview-effect-link { display:inline-flex; gap:6px; align-items:center; padding:6px 9px; border:1px solid #dce4db; border-radius:5px; color:#406c50; font-size:11px; white-space:nowrap; }
@media(min-width:1500px) { .effects-page .container { max-width:1336px; } }
@media(max-width:1100px) { .effects-hero-grid { gap:35px; }.effects-hero h1 { font-size:47px; }.effects-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.effect-article-layout { gap:35px; grid-template-columns:minmax(0,1fr) 280px; }.effects-process>.container { grid-template-columns:1fr; gap:28px; } }
@media(max-width:760px) { .effects-hero { padding:28px 0 58px; }.effects-hero-grid { grid-template-columns:1fr; gap:20px; }.effects-breadcrumb { margin-bottom:24px; }.effects-hero h1 { font-size:40px; margin:14px 0 17px; }.effects-hero-copy>p { font-size:14px; }.effects-hero-actions { margin-top:24px; gap:20px; }.effects-hero-notes { margin-top:23px; }.effects-hero-art { margin-top:9px; }.effects-hero-stage { min-height:275px; }.effects-hero-caption { bottom:-28px; }.effects-collection { padding:38px 0 44px; }.effects-collection-heading { display:block; }.effects-collection h2 { font-size:23px; }.effects-collection-heading p { font-size:12px; }.effects-search { margin-top:20px; min-width:0; width:100%; }.effects-filter-row { display:block; }.effects-filters { gap:5px; }.effects-filters button { font-size:11px; padding:7px 10px; }.effects-motion-button { margin-top:14px; padding-left:0; }.effects-grid { gap:18px; }.effect-card-body { padding:15px; }.effect-card h3 { font-size:16px; }.effect-card-meta { font-size:9px; }.effects-process h2 { font-size:21px; }.effects-process ol { gap:13px; }.effects-process strong { font-size:12px; }.effects-template-context { padding:15px; flex-wrap:wrap; }.effects-shortlist { bottom:12px; width:calc(100% - 24px); }.effects-shortlist>.container { padding:11px 14px; }.effects-shortlist p { max-width:170px; }.effects-shortlist .qx-button { font-size:11px; padding:5px 10px; }.effects-shortlist-actions { gap:8px; }.effects-detail-page { padding-top:94px; }.effect-article-header { display:block; }.effect-article-header h1 { font-size:29px; }.effect-article-header>.qx-button { margin-top:20px; }.effect-article-header p { font-size:13px; }.effect-demo-toolbar { padding:12px; flex-wrap:wrap; }.effect-demo-toolbar h2 span { margin-left:5px; }.effect-demo-tools { gap:5px; }.effect-demo-tools>button,.effect-demo-tools>a { padding:4px 7px; }.effect-demo-viewport { padding:10px; }.effect-demo-frame { height:450px; }.effect-demo-foot { padding:12px; gap:12px; flex-wrap:wrap; }.effect-demo-foot p { font-size:11px; }.effect-article-layout { display:block; margin:35px 0; }.effect-article-body h2 { font-size:21px; }.effect-article-aside { margin-top:35px; }.effect-related>div { grid-template-columns:1fr; }.effect-standalone-toolbar { padding:10px 14px; }.effect-standalone-footer { display:block; padding:10px 14px; }.effect-standalone-footer a { display:block; margin-top:7px; }.effect-standalone-stage { height:calc(100vh - 180px); min-height:420px; } }
@media(max-width:540px) { .effects-grid { grid-template-columns:1fr; }.effects-hero-notes { gap:11px; font-size:10px; }.effect-cover { height:215px; }.effects-collection-heading h2 { font-size:21px; }.effects-process ol { grid-template-columns:1fr; gap:17px; }.effects-process li { position:relative; padding-left:48px; }.effects-process li>span { position:absolute; left:0; top:0; font-size:24px; }.effects-shortlist p { max-width:125px; }.effects-shortlist strong { font-size:11px; }.effect-demo-panel.is-mobile .effect-demo-frame { height:550px; }.effect-article-meta { gap:13px; font-size:10px; } }
@media(prefers-reduced-motion:reduce) { .effects-page * { scroll-behavior:auto!important; transition:none!important; }.effects-demo-body * { scroll-behavior:auto!important; } }

.effect-cover .fx-stage h2{font-size:40px}.effect-cover .fx-stage .fx-scene-nav{padding:17px 24px}.effect-cover .fx-stage .fx-scene-body{padding:30px 32px}.effect-cover .fx-stage .fx-aurora-content{padding:28px 32px}.effect-cover .fx-stage .fx-aurora-tiles{margin-top:22px}.effect-cover .fx-stage .fx-type-art{min-height:240px}

.preview-name .preview-effect-link{border:0;padding:0;font-size:10px;line-height:1.5;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;display:block}

.effect-cover .fx-stage:not(.fx-scene){width:100%;height:100%;min-height:0;transform:none!important}.effect-cover .fx-stage:not(.fx-scene) .effects-static-art strong{font-size:20px}