:root { --purple:#6558e8; --purple-dark:#312a86; --ink:#14152b; --muted:#6f748c; --line:#dfe3f1; --soft:#f3f5fc; --heading:"Space Grotesk",sans-serif; --body:"Manrope",sans-serif; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; color:var(--ink); background:#eef1fb; font-family:var(--body); }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.demo-active { overflow:hidden; user-select:none; -webkit-user-select:none; }
.demo-topbar { position:fixed; z-index:50; inset:0 0 auto 0; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px; min-height:72px; padding:10px 22px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.96); box-shadow:0 8px 30px rgba(40,44,90,.08); backdrop-filter:blur(18px); }
.demo-brand { display:inline-flex; align-items:center; gap:10px; }
.demo-logo { display:grid; width:42px; height:42px; place-items:center; border-radius:13px; color:#fff; background:linear-gradient(145deg,#8f7cff,#5545df); box-shadow:0 10px 28px rgba(85,69,223,.28); font:700 22px var(--heading); }
.demo-brand strong,.demo-brand small { display:block; }
.demo-brand strong { font:700 21px var(--heading); }
.demo-brand small { margin-top:2px; color:#5960a2; font-size:8px; font-weight:800; letter-spacing:.14em; }
.demo-notice { justify-self:center; padding:8px 14px; border:1px solid #e3e5f2; border-radius:999px; color:#555b74; background:#f8f9fd; font-size:11px; font-weight:700; }
.demo-session { display:flex; align-items:center; gap:10px; }
.demo-session span { color:var(--muted); font-size:10px; font-weight:700; }
.demo-session strong { min-width:62px; padding:8px 10px; border-radius:10px; color:#fff; background:#17182c; text-align:center; font:700 16px var(--heading); letter-spacing:.04em; }
.demo-session a { padding:9px 12px; border:1px solid #dcdff0; border-radius:10px; color:#4d5193; background:#fff; font-size:10px; font-weight:800; }
.demo-layout { display:grid; grid-template-columns:260px 1fr; height:100vh; padding-top:72px; }
.demo-sidebar { position:relative; z-index:5; overflow-y:auto; padding:24px 16px; border-right:1px solid var(--line); background:#fff; }
.demo-sidebar > p { margin:0 10px 14px; color:#989db1; font-size:9px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.demo-nav-item { display:flex; width:100%; align-items:center; gap:11px; margin:4px 0; padding:10px 11px; border:0; border-radius:12px; color:#4f556d; background:transparent; text-align:left; font-size:12px; font-weight:700; cursor:pointer; transition:.18s ease; }
.demo-nav-item span { display:grid; flex:0 0 auto; width:31px; height:31px; place-items:center; border:1px solid #dfe3f3; border-radius:9px; color:#5a61b2; background:#f2f5fc; font-size:8px; font-weight:800; }
.demo-nav-item:hover { background:#f4f5fb; transform:translateX(2px); }
.demo-nav-item.is-active { color:#fff; background:linear-gradient(135deg,#685ce9,#5548d9); box-shadow:0 12px 30px rgba(90,75,222,.23); }
.demo-nav-item.is-active span { border-color:rgba(255,255,255,.25); color:#fff; background:rgba(255,255,255,.13); }
.demo-help { margin-top:24px; padding:16px; border:1px solid #dfe2f2; border-radius:16px; background:linear-gradient(145deg,#f8f7ff,#f2f6ff); }
.demo-help strong,.demo-help small { display:block; }
.demo-help strong { font:650 14px var(--heading); }
.demo-help small { margin-top:7px; color:#6d7288; font-size:9px; line-height:1.55; }
.demo-help a { display:inline-block; margin-top:12px; color:#5648db; font-size:10px; font-weight:800; }
.demo-main { min-width:0; overflow:auto; padding:26px; }
.demo-view-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:15px; }
.demo-view-header small { color:#6054df; font-size:9px; font-weight:800; letter-spacing:.12em; }
.demo-view-header h1 { margin:4px 0 0; font:700 clamp(27px,3vw,40px) var(--heading); letter-spacing:-.04em; }
.read-only-pill { padding:7px 11px; border:1px solid #caeadb; border-radius:999px; color:#178552; background:#ecfbf4; font-size:9px; font-weight:800; }
.demo-frame { position:relative; overflow:hidden; width:100%; border:1px solid #dfe3f0; border-radius:22px; background:#fff; box-shadow:0 26px 80px rgba(43,48,102,.15); }
.demo-frame img { display:block; width:100%; height:auto; min-height:420px; object-fit:cover; object-position:top left; pointer-events:none; -webkit-user-drag:none; transition:opacity .18s ease, transform .3s ease; }
.demo-frame.is-loading img { opacity:.25; transform:scale(.995); }
.demo-image-loader { position:absolute; z-index:2; top:50%; left:50%; display:none; width:34px; height:34px; margin:-17px; border:3px solid #e5e6f4; border-top-color:#6254e4; border-radius:50%; animation:spin .8s linear infinite; }
.demo-frame.is-loading .demo-image-loader { display:block; }
@keyframes spin { to { transform:rotate(360deg); } }
.demo-footnote { margin:13px 4px 30px; color:#737990; font-size:10px; line-height:1.6; }
.demo-watermarks { position:fixed; z-index:40; inset:72px 0 0 260px; display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; overflow:hidden; pointer-events:none; opacity:.075; }
.demo-watermarks span { display:grid; place-items:center; color:#362b8b; font:800 17px var(--heading); letter-spacing:.14em; transform:rotate(-24deg); white-space:nowrap; }
.capture-shield { position:fixed; z-index:100; inset:0; display:none; place-items:center; color:#fff; background:#101124; font:700 22px var(--heading); }
body.is-obscured .capture-shield,body.capture-warning .capture-shield { display:grid; }
body.capture-warning .capture-shield::after { content:"Screen capture is disabled for this public demo."; position:absolute; margin-top:58px; color:#b9b8d1; font:500 12px var(--body); }

.ended-shell { min-height:100vh; display:grid; place-items:center; padding:28px; background:radial-gradient(circle at 50% 0%,rgba(114,84,239,.22),transparent 43%),#0d0e1c; color:#fff; }
.ended-brand { position:fixed; top:24px; left:28px; }
.ended-brand small { color:rgba(255,255,255,.48); }
.ended-card { width:min(720px,100%); padding:52px; border:1px solid rgba(255,255,255,.13); border-radius:30px; background:rgba(22,23,44,.86); box-shadow:0 45px 150px rgba(0,0,0,.45); text-align:center; backdrop-filter:blur(22px); }
.ended-icon { display:grid; width:72px; height:72px; margin:0 auto 20px; place-items:center; border:1px solid rgba(144,116,255,.3); border-radius:22px; background:rgba(112,82,236,.13); font-size:31px; }
.ended-eyebrow { margin:0; color:#a897ff; font-size:9px; font-weight:800; letter-spacing:.16em; }
.ended-card h1 { margin:14px 0; font:700 clamp(40px,6vw,66px)/1.02 var(--heading); letter-spacing:-.055em; }
.ended-card > p:not(.ended-eyebrow) { max-width:610px; margin:0 auto; color:rgba(255,255,255,.65); font-size:14px; line-height:1.8; }
.ended-actions { display:flex; justify-content:center; gap:11px; margin-top:30px; }
.primary-action,.secondary-action { min-height:48px; display:inline-flex; align-items:center; justify-content:center; padding:0 19px; border-radius:13px; font-size:11px; font-weight:800; }
.primary-action { color:#fff; background:linear-gradient(135deg,#8a68ff,#6046df); box-shadow:0 18px 40px rgba(87,57,211,.32); }
.secondary-action { border:1px solid rgba(255,255,255,.13); color:#fff; background:rgba(255,255,255,.06); }
.trial-link { display:inline-block; margin-top:22px; color:#9be6c0; font-size:11px; font-weight:800; }
.ended-card > small { display:block; max-width:580px; margin:24px auto 0; color:rgba(255,255,255,.37); font-size:9px; line-height:1.6; }
.ended-card > small a { color:#b8a8ff; }

@media print { body * { visibility:hidden!important; } body::before { content:"Printing and capture are disabled for the Tork public demo."; visibility:visible!important; position:fixed; inset:0; display:grid; place-items:center; color:#000; background:#fff; font:700 24px var(--heading); } }
@media (max-width:900px) { .demo-notice { display:none; } .demo-layout { grid-template-columns:88px 1fr; } .demo-sidebar { padding:18px 9px; } .demo-sidebar > p,.demo-nav-item:not(.is-active){ font-size:0; } .demo-nav-item { justify-content:center; padding:8px; } .demo-nav-item span { width:38px; height:38px; } .demo-help { display:none; } .demo-watermarks { left:88px; grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) { .demo-topbar { grid-template-columns:auto 1fr; padding:9px 12px; } .demo-session span,.demo-session a { display:none; } .demo-session { justify-self:end; } .demo-layout { grid-template-columns:1fr; padding-top:68px; } .demo-sidebar { position:fixed; z-index:45; right:0; bottom:0; left:0; display:flex; overflow-x:auto; gap:5px; padding:7px; border-top:1px solid var(--line); border-right:0; } .demo-sidebar > p,.demo-help { display:none; } .demo-nav-item,.demo-nav-item:not(.is-active) { flex:0 0 auto; width:44px; margin:0; padding:4px; font-size:0; } .demo-nav-item span { width:36px; height:36px; } .demo-main { padding:18px 12px 82px; } .demo-frame { border-radius:14px; } .demo-frame img { min-height:260px; } .demo-watermarks { inset:68px 0 58px 0; } .demo-watermarks span { font-size:11px; } .ended-card { padding:36px 20px; } .ended-actions { flex-direction:column; } .ended-brand { position:static; margin-bottom:24px; } .ended-shell { display:flex; flex-direction:column; justify-content:center; } }