.try-page { background:#f7f9fc }
.try-main { width:min(100% - 48px,1152px); margin:0 auto; padding:126px 0 82px }
.try-intro { max-width:760px; margin:0 auto 38px; text-align:center }
.try-intro .eyebrow { margin-bottom:10px }
.try-intro h1 { margin:0; color:var(--fg); font-family:var(--font-heading); font-size:clamp(36px,4.4vw,52px); font-weight:800; letter-spacing:-.045em; line-height:1.15 }
.try-intro .lead { margin:16px auto 0; color:var(--muted); font-size:16px; line-height:1.75 }
.try-page .try-title-row { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:13px }
.try-page .try-title-row .service-status { margin-top:5px; padding:7px 12px; border-color:var(--border-strong); background:var(--bg); box-shadow:0 5px 16px rgba(14,30,48,.07); font-family:var(--font-mono); font-size:10px }
.try-page .try-title-row .service-status.ready { border-color:rgba(34,150,92,.28); color:var(--success); background:rgba(34,150,92,.06) }
.try-page .try-title-row .service-status.error { border-color:rgba(209,76,85,.25); color:#b43b45; background:rgba(209,76,85,.06) }
.try-page .connection-tip { width:fit-content; max-width:100%; margin:12px auto 0; padding:8px 12px; border:1px solid color-mix(in srgb,var(--amber) 34%,var(--border)); border-radius:7px; background:color-mix(in srgb,var(--amber-soft) 70%,var(--bg)); color:#78501c; font-size:12px; line-height:1.55 }
.try-page .connection-tip[hidden] { display:none }
.try-page .service-status.loading::before { width:9px; height:9px; border:2px solid color-mix(in srgb,var(--amber) 28%,var(--border)); border-top-color:var(--amber); background:transparent; animation:service-spin .75s linear infinite }
@keyframes service-spin { to { transform:rotate(360deg) } }
.try-page .example-picker { margin-bottom:20px; padding:20px 24px; border:1px solid var(--border); border-radius:12px; background:var(--bg); box-shadow:var(--card-shadow) }
.try-page .example-picker-head .eyebrow { margin:0 0 4px; color:var(--violet); font-size:10px }
.try-page .example-picker-head h2 { margin:0; font-family:var(--font-heading); font-size:18px; font-weight:800; letter-spacing:-.025em }
.try-page .example-picker-options { display:grid; gap:10px; min-width:0; margin-top:16px; padding-top:16px; border-top:1px solid var(--border) }
.try-page .example-picker-options>.presets:empty { display:none }
.try-page .example-reset { display:flex; justify-content:flex-end; margin-top:14px; padding-top:14px; border-top:1px dashed var(--border) }
.try-page .example-reset button { display:inline-flex; align-items:center; gap:7px; padding:7px 11px; border:0; border-radius:7px; background:transparent; color:var(--accent); font:700 12px/1.4 var(--font-heading); cursor:pointer }
.try-page .example-reset button:hover { background:var(--accent-soft) }
.try-page .wrap { grid-template-columns:1fr; gap:20px; align-items:start }
.try-page .pane { min-width:0; padding:24px; border:1px solid var(--border); border-radius:12px; background:var(--bg); box-shadow:var(--card-shadow) }
.try-page .media-pane { height:fit-content }
.try-page .workbench-pane { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; padding:0; overflow:hidden }
.try-page .questions-pane,.try-page .result-pane { min-width:0; padding:24px }
.try-page .result-pane { border-left:1px solid var(--border) }
.try-page .pane-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--border) }
.try-page .pane-head .eyebrow { margin-bottom:3px; color:var(--cyan); font-size:10px }
.try-page .pane-head h2 { margin:0; font-family:var(--font-heading); font-size:21px; font-weight:800; letter-spacing:-.025em }
.try-page .service-status { display:inline-flex; align-items:center; gap:8px; flex:none; padding:5px 10px; border:1px solid var(--border); border-radius:99px; color:var(--muted); background:var(--bg-alt); font-size:11px; white-space:nowrap }
.try-page .service-status::before { width:7px; height:7px; border-radius:50%; background:var(--amber); content:"" }
.try-page .service-status.ready::before { background:var(--success) }
.try-page .service-status.error::before { background:#d14c55 }
.try-page .presets { gap:8px; margin:0 }
.try-page .presets .lab { display:inline-flex; align-items:center; align-self:stretch; min-width:58px; margin-right:2px; padding-right:10px; border-right:1px solid var(--border); color:var(--fg); font-family:var(--font-heading); font-size:12px; font-weight:800 }
.try-page .presets button { min-height:34px; padding:6px 11px; border:1px solid var(--border); border-radius:7px; background:var(--bg); color:var(--muted); font-size:12px; line-height:1.3; transition:background .15s,border-color .15s,color .15s }
.try-page .presets button:hover { border-color:var(--accent); color:var(--accent) }
.try-page .presets button:disabled { opacity:.5; cursor:not-allowed }
.try-page .presets button:disabled:hover { border-color:var(--border); color:var(--muted) }
.try-page .presets button.on { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); font-weight:700 }
.try-page .presets button.vid { border-style:solid }
.try-page .upload-zone { position:relative; display:flex; align-items:center; gap:13px; min-height:76px; margin:22px 0 10px; padding:14px 16px; border:1px dashed var(--border-strong); border-radius:9px; background:var(--bg-alt); color:var(--fg); cursor:pointer; transition:border-color .15s,background .15s }
.try-page .upload-zone:hover,.try-page .upload-zone.dragover { border-color:var(--accent); background:var(--accent-soft) }
.try-page .upload-zone.disabled { opacity:.55; cursor:not-allowed }
.try-page .upload-zone.disabled:hover { border-color:var(--border-strong); background:var(--bg-alt) }
.try-page .upload-zone:focus-within { outline:2px solid var(--accent); outline-offset:2px }
.try-page .upload-zone .upload-icon { display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:8px; background:var(--accent-soft); color:var(--accent); font-size:24px; line-height:1 }
.try-page .upload-zone strong,.try-page .upload-zone small { display:block }
.try-page .upload-zone strong { font-size:13px; font-weight:750 }
.try-page .upload-zone small { margin-top:2px; color:var(--muted); font-size:11px }
.try-page #file { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.try-page .source-note { min-height:20px; margin:0 0 12px; color:var(--muted); font-size:12px; overflow-wrap:anywhere }
.try-page .preview { display:grid; place-items:center; min-height:260px; padding:15px; overflow:hidden; border:1px solid var(--border); border-radius:9px; background:var(--bg-alt) }
.try-page #canvasWrap { max-width:100% }
.try-page #shot { max-height:600px; width:auto; max-width:100%; border-radius:6px; box-shadow:0 10px 28px rgba(14,30,48,.1); object-fit:contain }
.try-page .region-tools { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:12px; color:var(--muted); font-size:11px; line-height:1.5 }
.try-page .region-tools>span:first-child { flex:1 1 210px }
.try-page .types { margin:0 0 17px; padding:10px 13px; border-left:3px solid var(--cyan); border-radius:5px; background:var(--bg-alt); color:var(--muted); font-size:12px; line-height:1.6 }
.try-page .q { margin-bottom:12px; padding:17px; border:1px solid var(--border); border-radius:9px; background:var(--bg-alt) }
.try-page .q .hd { margin-bottom:12px }
.try-page .q .hint { flex:1; color:var(--muted); font-size:11px; line-height:1.4 }
.try-page .q select,.try-page .q input.opts,.try-page .q textarea { border:1px solid var(--border); border-radius:7px; background:var(--bg); color:var(--fg); font-size:13px; outline:none }
.try-page .q select { min-height:34px; padding:6px 9px; color:var(--accent); font-family:var(--font-mono); font-weight:700 }
.try-page .q textarea { min-height:82px; padding:11px 12px; line-height:1.55 }
.try-page .q input.opts { min-height:38px; margin-top:8px; padding:8px 11px }
.try-page .q select:focus,.try-page .q input.opts:focus,.try-page .q textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft) }
.try-page .q .rm { width:30px; height:30px; margin-left:0; border-radius:6px; color:var(--muted); font-size:20px }
.try-page .q .rm:hover { background:var(--border); color:var(--fg) }
.try-page .q .ub { display:flex!important; align-items:center; gap:6px; margin-top:10px!important; font-size:11px }
.try-page .q .nudge { background:var(--cyan-soft); border-color:var(--cyan); color:var(--fg) }
.try-page .question-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:22px 0 0; padding-top:18px; border-top:1px solid var(--border) }
.try-page .add-actions { display:flex; flex-wrap:wrap; gap:7px; margin-right:auto }
.try-page button.ghost { min-height:34px; padding:7px 11px; border:1px solid var(--border); border-radius:7px; background:var(--bg); color:var(--accent); font-size:12px; font-weight:700 }
.try-page button.ghost:hover { border-color:var(--accent); background:var(--accent-soft) }
.try-page button.primary { min-height:40px; padding:9px 16px; border-radius:7px; background:linear-gradient(110deg,var(--accent),var(--cyan)); color:#fff; box-shadow:0 7px 16px rgba(49,93,220,.16); font-size:12px; font-weight:800 }
.try-page button.primary:hover { filter:brightness(1.07) }
.try-page button.primary[disabled] { opacity:.55 }
.try-page .timer { font-size:17px; line-height:1; font-variant-numeric:tabular-nums }
.try-page #out.result-pane { position:static; display:block; max-height:none; margin:0; overflow:visible }
.try-page .result-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid var(--border) }
.try-page .result-head .eyebrow { margin-bottom:3px; color:var(--violet); font-size:10px }
.try-page .result-head h2 { margin:0; font-family:var(--font-heading); font-size:23px; letter-spacing:-.025em }
.try-page .result-meta { max-width:620px; margin:0; font-family:var(--font-mono); font-size:11px; text-align:right }
.try-page .answer-grid { display:grid; grid-template-columns:1fr; align-items:start; gap:14px }
.try-page .result-empty { display:grid; place-items:center; min-height:260px; padding:32px; color:var(--muted); text-align:center }
.try-page .result-empty svg { width:38px; height:38px; margin-bottom:13px; fill:none; stroke:var(--border-strong); stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5 }
.try-page .result-empty p { max-width:310px; margin:0; font-size:13px; line-height:1.7 }
.try-page .result-empty.busy-state { min-height:180px }
.try-page .result-loader { display:block; width:24px; height:24px; margin:0 auto 14px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:result-spin .8s linear infinite }
@keyframes result-spin { to { transform:rotate(360deg) } }
.try-page .ansq { min-width:0; margin:0; padding:17px; border:1px solid var(--border); border-radius:9px; background:var(--bg-alt) }
.try-page .ansq h4 { margin:0 0 12px; font-size:14px; line-height:1.55 }
.try-page .ansline { grid-template-columns:40px minmax(50px,1fr) minmax(110px,.7fr); gap:8px; font-size:11px }
.try-page .ansline>span:last-child { overflow-wrap:anywhere }
.try-page .result-tip { margin:18px 0 0; padding-top:15px; border-top:1px solid var(--border); font-size:11px }
.try-page .bar { background:var(--border) }
.try-page .bar i { background:linear-gradient(90deg,var(--accent),var(--cyan)) }
.try-page .bar.abst i { background:var(--violet) }
.try-page .bar.top i { background:var(--success) }
.try-page .busy,.try-page .err { margin:12px 0; font-size:12px }
@media (max-width:980px) { .try-page .workbench-pane { grid-template-columns:1fr }.try-page .result-pane { border-top:1px solid var(--border); border-left:0 }.try-page .answer-grid { grid-template-columns:1fr } }
@media (max-width:720px) { .try-main { width:min(100% - 32px,1152px); padding-top:106px }.try-intro { margin-bottom:26px }.try-intro .lead { font-size:14px }.try-page .example-picker { padding:17px }.try-page .pane { padding:17px }.try-page .workbench-pane { padding:0 }.try-page .questions-pane,.try-page .result-pane { padding:17px }.try-page .pane-head h2 { font-size:18px }.try-page #shot { max-height:500px }.try-page .question-actions button.primary { width:100% }.try-page .result-head { display:grid; gap:8px }.try-page .result-meta { text-align:left } }