﻿.has-detail{cursor:pointer;position:relative}.detail-card-hint{display:block;margin-top:7px;font-size:11px;color:#92a7dc}.detail-card-hint>span{display:inline-block;margin-left:4px;transition:transform .25s}.has-detail:hover .detail-card-hint>span{transform:translate(2px,-2px)}body.service-detail-open{overflow:hidden}
dialog.service-detail{--blue:#a5b9f5;--muted:#8394b5;width:min(1120px,calc(100% - 48px));max-width:none;height:min(790px,calc(95dvh - 46px));max-height:calc(95dvh - 46px);padding:0;border:1px solid #7c92bf40;border-radius:18px;background:#171c25;color:var(--text);overflow:hidden;box-shadow:0 40px 130px #0009}.service-detail[open]{display:flex;flex-direction:column}.service-detail::backdrop{background:#080b12ce;backdrop-filter:blur(10px)}
.detail-header{padding:22px 64px 22px 32px;border-bottom:1px solid #ffffff0d;flex-shrink:0;position:relative;z-index:3;background:#1c222d}.service-detail .detail-header h2{font-size:14px;line-height:1.5;margin:0;outline:none;font-weight:400;letter-spacing:0}.detail-area{color:#9eafe0}.detail-separator{color:#536484;padding:0 8px}.detail-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#445573 #171c25}
.cleaning-story{padding:30px 36px 26px}.story-caption{min-height:85px;padding-left:1px}.story-caption h3{font-size:30px;font-weight:500;margin:0;letter-spacing:-1px;line-height:1.2}.story-caption p{font-size:13px;line-height:1.6;color:#93a3bf;margin-top:10px}.story-stage{position:relative;min-height:390px;padding:24px 0;isolation:isolate}.story-stage:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 45% 42%,#536fa514,transparent 68%);pointer-events:none}.story-stage [hidden]{display:none!important}.story-main{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;min-width:0}.story-table-wrap{width:100%;max-width:760px;margin:0 auto;min-width:0;position:relative;z-index:2}.story-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:12px;color:#c1cce1;border:1px solid #7a93c332;border-radius:10px;overflow:hidden;background:#202734;box-shadow:0 20px 50px #080d173b}.story-table th,.story-table td{padding:9px 12px;text-align:left;border-bottom:1px solid #ffffff08;overflow-wrap:anywhere;font-variant-numeric:tabular-nums;font-weight:400;line-height:1.55}.story-table th{font-size:10px;letter-spacing:.3px;color:#8d9fc2;background:#252f40;padding-top:12px;padding-bottom:12px}.story-table tbody tr:last-child td{border-bottom:0}.story-table .empty-cell{color:#dfbb7c}.story-table .issue-cell{background:#829fec20;box-shadow:inset 0 -2px #9bb3f1}.story-table .issue-cell.missing{background:#d7ac6820;box-shadow:inset 0 -2px #d7ac68}.story-table .issue-cell.category{background:#b4a1db20;box-shadow:inset 0 -2px #b4a1db}.story-table .issue-cell.format{background:#80bbb920;box-shadow:inset 0 -2px #80bbb9}.story-table.is-prepared{border-color:#91bda56b;box-shadow:0 18px 60px #589d7712}.story-table.is-prepared th{color:#b4d2c5}.story-table.is-selected th:last-child,.story-table.is-selected td:last-child{opacity:.25;text-decoration:line-through}
.story-errors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:36px auto 0;max-width:880px;position:relative;z-index:2}.story-error{--ink:#a6baf4;border:1px solid #8da7df30;border-radius:10px;background:#222c3c;padding:16px 14px;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:64px;font-size:11px;line-height:1.5}.story-error>span:nth-child(2){display:none}.story-error-count{font-size:26px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1}.story-error.missing{--ink:#ddbd89}.story-error.format{--ink:#93cecb}.story-error.category{--ink:#c6b1ed}.story-error.is-active{border-color:var(--ink);background:#2a3548;box-shadow:0 0 25px #8ba9ee12}.story-arrows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:3}.story-arrows path{fill:none;stroke:#adc1fa;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.story-arrows path.missing{stroke:#ddbd89}.story-arrows path.format{stroke:#93cecb}.story-arrows path.category{stroke:#c6b1ed}
.story-source{position:relative;z-index:2;width:360px;max-width:100%;margin:32px auto 0;padding:20px 16px;background:#252e3f;border:1px solid #829ce94d;border-radius:12px;box-shadow:0 15px 40px #090e182b}.source-name{display:block;font-size:11px;line-height:1.6;color:#afc0e9;margin-bottom:16px}.story-source table{width:100%;font-size:11px;table-layout:fixed;border-collapse:collapse}.story-source th,.story-source td{font-weight:400;text-align:left;padding:9px 3px;border-bottom:1px solid #ffffff0a;color:#c9d5ee;overflow-wrap:anywhere}.story-source th{font-size:9px;color:#8ea2c8}
.story-schema{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:760px;margin:26px auto 0}.story-schema span{font-size:11px;border:1px solid #859dcc26;border-radius:8px;padding:12px;text-align:center;color:#bbcbed;background:#25304866}.story-schema b{display:block;margin-top:5px;font-size:10px;font-weight:400;color:#91a6d0}
.story-main.is-result{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}.is-result .story-table-wrap{grid-column:2;grid-row:1;max-width:none;margin:0}.is-result .story-benefits{grid-column:1;grid-row:1;min-width:0}.is-result .story-table{font-size:11px;box-shadow:none}.is-result .story-table th,.is-result .story-table td{padding:8px 8px}.is-result .story-table th{font-size:9px}.comparison-label{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:16px;font-size:16px;color:#c1d0ee}.comparison-label small{font-size:9px;font-weight:400;color:#8195b9}.is-result .story-table-wrap .comparison-label{color:#b5d8c7}.is-result .story-table-wrap .story-table{border-color:#80ad9655}
.story-controls{flex-shrink:0;border-top:1px solid #ffffff0c;padding:20px 32px 18px;background:#1c222d;z-index:4}.story-timeline{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));position:relative;padding-top:22px}.story-timeline input{position:absolute;top:0;left:0;width:100%;height:16px;margin:0;padding:0;border:0;appearance:none;background:none;cursor:pointer}.story-timeline input::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(to right,#a6baf4 var(--progress,0%),#35425a var(--progress,0%))}.story-timeline input::-webkit-slider-thumb{appearance:none;width:12px;height:12px;opacity:0}.story-timeline input::-moz-range-track{height:3px;background:#35425a}.story-timeline input::-moz-range-progress{height:3px;background:#a6baf4}.story-timeline input::-moz-range-thumb{opacity:0}.story-playhead{position:absolute;left:0;top:2px;width:12px;height:12px;border-radius:50%;border:2px solid #1c222d;background:#c1d0f8;box-shadow:0 0 0 1px #8c9de5;pointer-events:none;will-change:transform}.story-timeline input:focus-visible+.story-playhead{outline:2px solid #c1d1f4;outline-offset:3px}.story-stop{font-size:10px;padding:4px 0;color:#7586a9;border:0;background:none;text-align:center;position:relative;min-height:28px}.story-stop[aria-current]{color:#d0dcf9}.story-stop:hover{color:#d0ddf4}.story-actions{display:flex;justify-content:space-between;align-items:center;margin-top:13px}.story-position{font-size:11px;font-variant-numeric:tabular-nums;color:#879ac0}.story-actions>div{display:flex;gap:8px;align-items:center}.story-actions button{font-size:12px;border:1px solid #7c91bc33;background:#252e3d;color:#bdcef0;padding:7px 13px;border-radius:7px;min-height:34px}.story-actions .story-play{min-width:105px;background:#9bb0ee18;border-color:#9bb0ee40}.story-actions button:hover{background:#8c9de52b;border-color:#8c9de580}.story-actions button:disabled{opacity:.3;cursor:default}.service-detail-close{position:absolute;right:17px;top:17px;width:32px;height:32px;border:1px solid #ffffff0d;background:#252e3d;color:#a8b7d2;border-radius:8px;font-size:22px;line-height:1;display:grid;place-items:center;z-index:4}.service-detail-close:hover{background:#36415a;color:#fff}.story-value{display:inline-block}.story-ghost{z-index:4;pointer-events:none}
@media(min-width:851px){.story-stage[data-scene='1'],.story-stage[data-scene='4']{display:grid;grid-template-columns:minmax(0,1fr) 225px;gap:48px;align-items:center}.story-stage[data-scene='1'] .story-errors{grid-template-columns:1fr;margin:0;gap:12px}.story-stage[data-scene='4'] .story-source{width:100%;margin:0}.story-stage[data-scene='1'] .story-table,.story-stage[data-scene='4'] .story-table{font-size:11px}.story-stage[data-scene='1'] .story-table td,.story-stage[data-scene='4'] .story-table td{padding:9px 9px}}
@media(max-width:850px){.story-main.is-result{grid-template-columns:1fr;gap:28px}.is-result .story-table-wrap{grid-column:1;grid-row:2}.is-result .story-benefits{grid-column:1;grid-row:1}.story-errors{grid-template-columns:repeat(2,minmax(0,1fr))}.story-table th,.story-table td{padding:8px}.story-stage{min-height:390px}}
@media(max-width:700px){dialog.service-detail{width:calc(100% - 20px);height:min(790px,calc(95dvh - 19px));max-height:calc(95dvh - 19px);border-radius:12px}.detail-header{padding:18px 49px 18px 18px}.service-detail .detail-header h2{font-size:12px}.detail-separator{padding:0 3px}.cleaning-story{padding:24px 16px 16px}.story-caption{min-height:90px}.story-caption h3{font-size:25px;letter-spacing:-.7px}.story-caption p{font-size:12px}.story-stage{padding:12px 0;min-height:350px}.story-table{font-size:9px;border-radius:8px}.story-table th{font-size:8px;letter-spacing:0}.story-table th,.story-table td{padding:7px 4px}.story-errors{margin-top:30px;gap:8px}.story-error{min-height:58px;padding:10px;font-size:10px}.story-error-count{font-size:23px}.story-source{width:100%;padding:16px;margin-top:30px}.story-schema{gap:5px;margin-top:22px}.story-schema span{padding:10px 3px;font-size:9px}.story-schema b{font-size:8px}.story-controls{padding:14px 18px}.story-stop span{display:none;font-size:9px}.story-stop[aria-current] span{display:block;position:absolute;white-space:nowrap;left:50%;transform:translateX(-50%)}.story-stop:before{content:'';display:block;width:3px;height:3px;border-radius:50%;background:#687b9e;margin:auto}.story-stop[aria-current]:before{background:#b6c9ee}.story-stop{padding:6px 0}.story-actions{margin-top:12px}.service-detail-close{right:10px;top:13px}.is-result .story-table{font-size:9px}.is-result .story-table th,.is-result .story-table td{padding:7px 4px}.comparison-label{font-size:15px}.comparison-label small{font-size:9px}}
.story-stage[data-scene='1'] tbody:has(.is-focus) tr:not(.is-focus){opacity:.5}
@media(prefers-reduced-motion:reduce){.detail-card-hint>span{transition:none}}
/* The animation communicates through the table and persistent error markers. */
.story-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.cleaning-story{padding-top:52px}.story-stage{min-height:480px}.story-error.is-resolved{border-color:#86b49b60;color:#a3cdb7;background:#24392e55}.story-error.is-resolved .story-error-count:after{content:'✓';font-size:15px;margin-left:7px}.story-table .fix-cell{box-shadow:inset 0 0 0 2px currentColor;background:#8fa8dc25}.story-table .fixed-cell{background:#7eb69a26;box-shadow:inset 0 -2px #91c5a8}.story-table .fix-cell.category{color:#c6b1ed}.story-table .fix-cell.missing{color:#ddbd89}.story-table .fix-cell.format{color:#93cecb}.story-table .fix-cell.duplicate{color:#a6baf4}
@media(min-width:851px){.story-stage[data-scene='2'],.story-stage[data-scene='3'],.story-stage[data-scene='5'],.story-stage[data-scene='6']{display:grid;grid-template-columns:minmax(0,1fr) 225px;gap:48px;align-items:center}.story-stage[data-scene='2'] .story-errors,.story-stage[data-scene='3'] .story-errors,.story-stage[data-scene='5'] .story-errors,.story-stage[data-scene='6'] .story-errors{grid-template-columns:1fr;margin:0;gap:12px}.story-stage[data-scene='4'] .story-main{grid-column:1;grid-row:1}.story-stage[data-scene='4'] .story-errors{grid-column:2;grid-row:1;grid-template-columns:1fr;margin:0}.story-stage[data-scene='4'] .story-source{grid-column:1;grid-row:2;width:360px;margin:0 auto}.story-stage[data-scene='4']{row-gap:24px}}
@media(max-width:850px){.story-stage:has(.story-errors:not([hidden])){display:flex;flex-direction:column}.story-errors{order:-1;width:100%;margin:0 0 24px}.story-source{margin-top:24px}}
@media(max-width:700px){.cleaning-story{padding-top:50px}.story-stage{min-height:450px}.story-error{min-height:54px}.story-table th,.story-table td{padding-top:6px;padding-bottom:6px}}
/* The result itself becomes a synchronized, virtualized pair of data streams. */
.is-scale .comparison-viewport{height:384px;overflow:hidden;border:1px solid #7a93c332;border-radius:10px;background:#202734}
.is-scale .story-table{border:0;border-radius:0;box-shadow:none;overflow:visible}
.is-scale .story-table thead{position:relative;z-index:2}
.is-scale .story-table thead tr{height:42px}
.is-scale .story-table tbody{will-change:transform}
.is-scale .story-table tbody tr{height:34px}
.is-scale .story-table th,.is-scale .story-table td{height:34px;padding:0 8px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:clip}
.is-scale .story-table th{background:#252f40}
.is-scale .story-table td.scale-fixed{color:#b8dbc8;background:#79ba9a20;box-shadow:inset 0 -2px #91c5a8}
.is-scale .story-table td:last-child{position:relative;padding-right:18px}
.is-scale .story-table-wrap td:last-child:after{content:'✓';position:absolute;right:5px;color:#91c5a8;font-size:9px}
.is-scale .story-table-wrap .comparison-viewport{border-color:#80ad9655}
@media(max-width:850px){.is-scale .comparison-viewport{height:214px}.story-main.is-scale{gap:22px}}
@media(max-width:700px){.is-scale .comparison-viewport{height:187px}.is-scale .story-table thead tr{height:35px}.is-scale .story-table th,.is-scale .story-table td,.is-scale .story-table tbody tr{height:30px}.is-scale .story-table td{padding:0 4px}.is-scale .story-table td:last-child{padding-right:14px}}

.is-scale .story-table thead{display:none}
.scale-heading{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:42px;align-items:center;background:#252f40;color:#8d9fc2;font-size:9px}
.scale-heading>span{padding:0 8px}
.scale-body-clip{height:340px;overflow:hidden;contain:paint;will-change:filter}
@media(max-width:850px){.scale-body-clip{height:170px}}
@media(max-width:700px){.scale-heading{height:35px;font-size:9px}.scale-heading>span{padding:0 4px}.scale-body-clip{height:150px}}

/* Continuous editorial composition: stable context, enlarged active detail. */
dialog.service-detail{height:min(800px,calc(100dvh - 36px));max-height:calc(100dvh - 36px);background:#151c27;border-color:#7898c52b;font-family:var(--font)}
.service-detail .cleaning-story{padding:48px 36px 18px}
.service-detail .cleaning-story .story-stage{display:block;min-height:556px;padding:0;isolation:isolate}
.service-detail .story-stage:before{background:radial-gradient(ellipse at 50% 45%,#536faa16,transparent 68%)}
.service-detail .story-main{padding-top:92px}
.service-detail .story-table-wrap{max-width:880px;transform-origin:0 0}
.service-detail .story-stage .story-table{font-family:inherit;font-size:12px;background:#202a39;border-color:#819bc634;box-shadow:0 20px 70px #070c1720;transition:opacity .32s,box-shadow .32s}
.service-detail .story-stage .story-table th{font-family:inherit;font-size:10px;letter-spacing:.3px;background:#263247;color:#94a8c9;height:42px;padding:0 12px}
.service-detail .story-stage .story-table td{height:34px;padding:0 12px;line-height:1.25}
.service-detail .story-stage .story-errors{position:absolute;top:0;left:0;right:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:880px;margin:0 auto;z-index:3}
.service-detail .story-error{min-height:58px;padding:12px 14px;gap:10px;background:#202b3b;border-radius:10px;font-size:11px;border-color:#8da7df20;transition:background .35s,border-color .35s,color .35s,opacity .35s}
.service-detail .story-error-count{font-size:22px}
.service-detail .story-error.is-active{background:#2c3a50;border-color:var(--ink);box-shadow:0 5px 28px #080d1725}
.service-detail .story-error.is-resolved{background:#21342f;border-color:#83b69b35;color:#a3cdb7}
.service-detail .story-table.has-focus{opacity:.22}
.service-detail .story-table .fixed-cell{background:#8fcaac1c;box-shadow:inset 0 -1px #91c5a86b}
.service-detail .story-table.is-selected th:last-child,.service-detail .story-table.is-selected td:last-child{opacity:.15;text-decoration:none}
.service-detail .story-stage .story-source{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:360px;max-width:90%;margin:0;padding:12px 16px;border-radius:12px;box-shadow:none;background:#222e40;border-color:#d7ac6835}
.service-detail .source-name{font-size:10px;margin-bottom:5px;color:#b4c1d8}
.service-detail .story-source td{padding:5px 4px;font-size:11px}
.story-source tr{opacity:.4;transition:opacity .3s}.story-source tr.is-source-active{opacity:1;background:#d7ac6810}
.motion-focus{--ink:#a6baf4;position:absolute;left:50%;top:51%;transform:translate(-50%,-50%);width:min(510px,90%);padding:24px 28px 28px;background:linear-gradient(145deg,#2b394e,#212c3d);border:1px solid color-mix(in srgb,var(--ink) 48%,transparent);border-radius:18px;box-shadow:0 28px 90px #050b1866,0 0 0 7px #101a2930;z-index:5;will-change:transform,opacity}
.motion-focus.missing{--ink:#ddbd89}.motion-focus.format{--ink:#93cecb}.motion-focus.category{--ink:#c6b1ed}
.focus-meta{display:flex;justify-content:space-between;gap:12px;font-size:11px;letter-spacing:.5px;color:var(--ink);margin-bottom:24px}
.focus-values{display:grid;grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);gap:12px;align-items:center;text-align:center;min-height:50px;font-size:29px;font-weight:500;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.focus-old{color:var(--ink);transition:opacity .3s;white-space:nowrap}
.focus-new{color:#9fafc9;opacity:.4;white-space:nowrap}
.focus-bridge{font-size:23px;color:#7285a7;transition:color .3s}
.motion-focus.is-fixed .focus-new{color:#b3e1c8;opacity:1}.motion-focus.is-fixed .focus-old{opacity:.5}.motion-focus.is-fixed .focus-bridge{color:#94c8aa}
.motion-filter{position:absolute;width:0;height:0;pointer-events:none}
.service-detail .story-main.is-result{max-width:100%;gap:24px;padding-top:68px}
.service-detail .is-result .story-table-wrap{max-width:none}
.service-detail .is-result .comparison-label{font-size:15px;margin-bottom:16px;letter-spacing:.1px}
.service-detail .is-scale .story-table th,.service-detail .is-scale .story-table td{height:34px;padding:0 8px;font-size:11px;line-height:1}
.service-detail .is-scale .story-table td:last-child{padding-right:18px}
.service-detail .is-scale .story-table{border:0;box-shadow:none;transition:none}
.service-detail .story-controls{padding:16px 32px;background:#192230;border-color:#ffffff0a}
.service-detail .story-stop{font-family:inherit}
.service-detail .story-actions{margin-top:9px}
@media(max-width:850px){
 .service-detail .story-main.is-result{padding-top:4px;gap:24px}
 .service-detail .cleaning-story .story-stage{min-height:520px}
 .service-detail .story-main{padding-top:134px}
 .service-detail .story-stage .story-errors{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .service-detail .story-error{min-height:48px;padding:10px 12px}
 .service-detail .story-main.is-scale{gap:20px}
 .service-detail .story-stage .story-source{bottom:-4px}
}
@media(max-width:700px){
 dialog.service-detail{height:min(780px,calc(100dvh - 20px));max-height:calc(100dvh - 20px)}
 .service-detail .cleaning-story{padding:50px 16px 20px}
 .service-detail .story-stage .story-table{font-size:10px}
 .service-detail .story-stage .story-table th{font-size:8px;height:35px;padding:0 5px}
 .service-detail .story-stage .story-table td{height:30px;padding:0 5px}
 .service-detail .story-error{font-size:10px}
 .service-detail .story-error-count{font-size:20px}
 .motion-focus{width:96%;padding:20px 16px;border-radius:14px;top:53%}
 .focus-values{font-size:22px;gap:7px;grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);letter-spacing:-.7px}
 .focus-meta{font-size:10px;margin-bottom:18px}
 .service-detail .story-controls{padding:14px 18px}
 .service-detail .is-scale .story-table td{height:30px;padding:0 4px;font-size:9px}
 .service-detail .is-scale .story-table td:last-child{padding-right:14px}
 .service-detail .story-stage .story-source{min-height:70px}
 .service-detail .story-source tr:not(.is-source-active){display:none}
}
@media(prefers-reduced-motion:reduce){.service-detail .story-error,.service-detail .story-table,.focus-old,.focus-bridge,.story-source tr{transition:none}}
