.subject-studio { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:80px;padding:80px 0 65px;border-top:1px solid var(--line); }
.subject-copy { min-width:0; }.subject-copy h3 { font-size:clamp(34px,3.3vw,46px);line-height:1.4;letter-spacing:-.035em;margin:24px 0; }
.subject-copy>p:not(.subject-access) { font-size:18px;line-height:1.8;color:var(--muted);max-width:32em; }
.subject-points { list-style:none;padding:0;margin:28px 0 32px; }.subject-points li { font-size:17px;line-height:1.7;margin:12px 0;color:#d7cbe2;display:flex;gap:12px; }.subject-points li::before { content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none;margin-top:12px; }
.subject-copy .subject-try { font-size:14px;margin-bottom:14px; }.subject-previews { display:flex;flex-wrap:wrap;gap:10px; }.subject-previews button { border:1px solid #c2a6fa3b;border-radius:24px;padding:11px 19px;font-size:16px;min-height:44px;color:#ccb4e9;transition:background .2s,color .2s; }.subject-previews button:hover,.subject-previews button[aria-pressed=true] { color:#190f28;background:#c2a6fa; }
.subject-access { color:#baa0cf;font-size:13px;line-height:1.7;margin-top:24px; }.subject-boundary { margin-top:16px;max-width:36em; }.subject-boundary summary { font-size:14px;color:#bda5cf;cursor:pointer;min-height:36px; }.subject-boundary p { font-size:15px;line-height:1.8;color:var(--muted);margin:10px 0; }
.subject-demo { min-width:0;justify-self:center;width:min(100%,390px); }.subject-phone { position:relative;height:640px;border:1px solid #c2a6fa35;background:linear-gradient(150deg,#261c33ee,#130e20f5);border-radius:32px;box-shadow:0 25px 75px #0003;padding:24px 20px;overflow:hidden; }
.subject-phone>header { display:flex;align-items:center;gap:12px;color:#d9b8ff;font-size:20px;font-weight:550;margin-bottom:27px; }.subject-phone>header>svg { width:21px;height:21px; }.subject-local-dot { margin-left:auto;width:6px;height:6px;border-radius:50%;background:#b6d7c8;box-shadow:0 0 14px #b6d7c840; }
.subject-result-heading { display:flex;align-items:center;justify-content:space-between;gap:8px;position:relative;z-index:4; }.subject-result-heading strong { display:block;font-size:26px;font-weight:550; }.subject-result-heading #subject-count { display:block;font-size:13px;color:#a99bb5;margin-top:6px; }.subject-date { margin-top:20px;margin-bottom:12px;font:11px monospace;letter-spacing:.1em;color:#ad94c3; }
.subject-filters summary { display:grid;place-items:center;list-style:none;width:42px;height:42px;border:1px solid #c2a6fa30;border-radius:50%;cursor:pointer;color:#c2a6fa; }.subject-filters summary::-webkit-details-marker { display:none; }.subject-filters summary svg { width:20px;height:20px; }
.subject-filters>div { position:absolute;right:0;top:56px;width:min(245px,100%);padding:18px;background:#30223df5;border:1px solid #c2a6fa40;border-radius:16px;box-shadow:0 10px 25px #0005; }.subject-filters label { display:flex;gap:10px;align-items:center;font-size:14px;color:#eadcf5; }.subject-filters input { accent-color:#c2a6fa;width:16px;height:16px; }.subject-filters select { margin-top:18px;width:100%;font:inherit;font-size:14px;min-height:40px;color:#eadcf5;background:#1c1428;border:1px solid #c2a6fa38;border-radius:8px;padding:6px; }
.subject-gallery { display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:408px;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain; }.subject-gallery figure { position:relative;break-inside:avoid;margin-bottom:6px;border-radius:4px;overflow:hidden; }.subject-gallery img { display:block;width:100%;height:auto;object-fit:contain; }.subject-video,.subject-archive { position:absolute;bottom:8px;left:8px;color:#fff;font-size:11px;display:flex;align-items:center;gap:5px;padding:4px 7px;background:#1d152ba8;border-radius:8px; }.subject-video svg,.subject-archive svg { width:13px;height:13px; }
.subject-switch { position:absolute;left:20px;bottom:28px;border-radius:24px;padding:10px 16px;min-height:44px;border:1px solid #c2a6fa50;background:#33223fe8;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#e2c8fd;display:flex;align-items:center;gap:8px;font-size:14px;box-shadow:0 4px 25px #0003; }.subject-switch svg { width:18px;height:18px; }.subject-switch svg:last-child { width:12px;height:12px; }.subject-home { position:absolute;bottom:9px;left:36%;right:36%;height:3px;background:#e9dff0;border-radius:5px; }
.subject-chooser { position:absolute;inset:75px 12px 83px;z-index:6;border-radius:22px;border:1px solid #c2a6fa40;background:#20162df5;padding:22px 18px;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px); }.subject-chooser[hidden] { display:none; }.subject-chooser>strong { display:block;font-size:18px;line-height:1.4; }.subject-theme-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px; }.subject-theme-grid button { min-height:82px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;border:1px solid #c2a6fa28;background:#a978db0a;border-radius:15px;color:#cfadee;font-size:14px; }.subject-theme-grid svg { width:27px;height:27px; }.subject-theme-grid button[aria-pressed=true] { border-color:#c2a6fa;background:#c2a6fa17;box-shadow:0 0 17px #c2a6fa10; }.subject-theme-grid button:disabled { opacity:.4;cursor:default; }.subject-chooser>p { margin-top:16px;font-size:12px;color:#b19dbf;line-height:1.7; }.subject-demo-note { text-align:center;color:#9b86ad;font-size:12px;line-height:1.7;margin-top:18px; }
.editor-note { display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;padding:40px 0 60px;border-top:1px solid var(--line); }.editor-note h3 { font-size:30px;line-height:1.5;margin:16px 0;letter-spacing:-.03em; }.editor-note p { font-size:17px;line-height:1.8;color:var(--muted);max-width:30em; }.editor-mini-tools { display:flex;flex-wrap:wrap;gap:12px;justify-content:center; }.editor-mini-tools>span { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-width:78px;min-height:100px;padding:12px 10px;border:1px solid #c2a6fa28;background:#c2a6fa06;border-radius:18px;color:#d1b7ed;font-size:13px; }.editor-mini-tools svg { width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round; }
@media(max-width:1000px) { .subject-studio { gap:36px; }.subject-copy h3 { font-size:34px; }.subject-phone { height:620px;padding-inline:16px; }.subject-gallery { max-height:390px; }.editor-note { gap:30px; }.editor-mini-tools { gap:8px; }.editor-mini-tools>span { min-width:70px; } }
@media(max-width:760px) { .subject-studio { grid-template-columns:1fr;padding-top:48px;gap:34px; }.subject-copy h3 { font-size:32px; }.subject-copy>p:not(.subject-access),.subject-points li { font-size:16px; }.subject-points { margin:22px 0; }.subject-demo { width:min(100%,370px); }.subject-phone { height:620px; }.subject-demo-note { text-align:left; }.subject-copy .subject-try { font-size:14px; }.editor-note { grid-template-columns:1fr;gap:24px;padding-bottom:40px; }.editor-note h3 { font-size:28px; }.editor-note p { font-size:16px; }.editor-mini-tools { justify-content:flex-start;gap:8px; }.editor-mini-tools>span { min-width:72px;min-height:88px;font-size:12px; } }
@media(max-width:380px) { .subject-copy h3 { font-size:28px; }.subject-phone { padding:22px 14px;height:595px;border-radius:25px; }.subject-chooser { inset:66px 8px 76px;padding:18px 14px; }.subject-theme-grid { gap:8px;margin-top:16px; }.subject-theme-grid button { min-height:72px; }.subject-chooser>p { font-size:11px;margin-top:11px; }.subject-phone>header { font-size:18px; }.subject-result-heading strong { font-size:24px; }.subject-switch { left:14px; }.subject-gallery { max-height:372px; }.subject-previews button { padding-inline:15px; } }
@media(prefers-reduced-motion:reduce) { .subject-previews button { transition:none; } }