:root{--bg: #ffffff;--surface: #f7f7f6;--surface-2: #f0efee;--border: rgba(0, 0, 0, .08);--border-2: rgba(0, 0, 0, .05);--ink: #111111;--ink-soft: #3d3d3d;--muted: #888888;--faint: #bbb;--stage: #f0efee;--stage-hue: 30;--accent: #1a1a1a;--sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;--serif: "Fraunces", Georgia, "Times New Roman", serif;--mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;--ease: cubic-bezier(.22, .61, .36, 1);color-scheme:light}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.app{height:100%;display:grid;grid-template-rows:auto auto 1fr;overflow:hidden}.topbar{display:flex;align-items:center;gap:24px;padding:12px 20px;border-bottom:1px solid var(--border);background:var(--bg);z-index:10}.brand{font-family:var(--serif);font-optical-sizing:auto;font-weight:500;font-size:20px;letter-spacing:-.02em;white-space:nowrap}.behavior-tabs{display:flex;gap:2px;flex:1}.behavior-tab{appearance:none;border:1px solid transparent;background:transparent;font-family:var(--sans);font-size:13px;font-weight:500;color:var(--muted);padding:7px 14px;border-radius:8px;cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease);white-space:nowrap}.behavior-tab:hover{background:var(--surface);color:var(--ink-soft)}.behavior-tab.active{background:var(--ink);color:#fff;border-color:transparent}.seg{display:inline-flex;padding:3px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;position:relative;flex-shrink:0}.seg button{appearance:none;border:0;background:transparent;font-family:var(--sans);font-weight:600;font-size:12px;color:var(--muted);padding:6px 14px;min-width:88px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:color .2s var(--ease);z-index:1}.seg button[aria-pressed=true]{color:var(--ink)}.seg-thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:var(--bg);box-shadow:0 1px 3px #0000001a,0 0 0 1px var(--border-2);transition:transform .35s var(--ease);z-index:0}.stage-wrap{position:relative;overflow:hidden;background:hsl(var(--stage-hue),20%,93%);transition:background-color .7s ease;display:grid;place-items:center}.device-wrap{position:relative;transition:width .45s var(--ease),height .45s var(--ease)}.device-wrap.desktop{width:100%;height:100%;max-width:100%;max-height:100%}.device-wrap.mobile{width:390px;height:min(100%,760px);max-height:760px}.device-screen{position:absolute;inset:0;overflow:hidden}.device-wrap.mobile .device-screen{inset:9px;border-radius:38px;background:var(--bg)}.device-shell{position:absolute;inset:0;pointer-events:none;z-index:20}.device-wrap.mobile .device-shell{border-radius:46px;box-shadow:0 0 0 9px #1a1a1a,0 30px 60px -20px #00000073,inset 0 1px #ffffff14}.notch{display:none}.device-wrap.mobile .notch{display:block;position:absolute;top:18px;left:50%;transform:translate(-50%);width:104px;height:26px;background:#1a1a1a;border-radius:999px;z-index:30}.device-wrap.desktop .device-shell{display:none}.ex-card{border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 8px 24px #0000001a,0 2px 6px #0000000f;will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}.card-thumb{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:#f5f5f4;cursor:default}.card-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.card-thumb .placeholder{display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none;padding:16px;text-align:center}.card-thumb .placeholder svg{opacity:.25}.card-thumb .placeholder span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);opacity:.7}.card-thumb.over{background:#eef2ff;outline:2px dashed #818cf8;outline-offset:-2px}.card-thumb .drop-flash{position:absolute;inset:0;background:#6366f11f;pointer-events:none}.ex-hint{position:absolute;left:50%;top:14px;transform:translate(-50%);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#00000038;pointer-events:none;white-space:nowrap;z-index:5}.device-wrap.mobile .ex-hint{display:none}.ex-feed-meta{position:absolute;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:14px;pointer-events:none;white-space:nowrap;z-index:2000}.ex-feed-label{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink)}.ex-feed-counter{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:#00000047}.ex-feed-hint{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}.device-wrap.mobile .ex-feed-hint{display:none}.ex-back-btn{position:absolute;top:16px;left:50%;transform:translate(-50%);appearance:none;border:1px solid var(--border);background:#ffffffe0;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);padding:7px 18px;border-radius:999px;cursor:pointer;z-index:9000;white-space:nowrap;box-shadow:0 2px 8px #00000014;transition:background .1s}.ex-back-btn:hover{background:#fffffffa}.device-wrap.mobile .ex-back-btn{top:28px}.no-select,.no-select *{user-select:none;-webkit-user-select:none}.device-wrap.real-mobile{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important}.device-wrap.real-mobile .device-screen{inset:0;border-radius:0;background:transparent}.device-wrap.real-mobile .device-shell{display:none}.stage-wrap{touch-action:none}@media(max-width:639px){.app{grid-template-rows:auto 1fr}.topbar{padding:10px 14px;gap:0}.brand{display:none}.behavior-tabs{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}.behavior-tabs::-webkit-scrollbar{display:none}.behavior-tab{font-size:12px;padding:8px 12px}}.cf{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;outline:none}.cf.no-select{cursor:grabbing}.cf-scene{position:absolute;inset:0;perspective-origin:50% 46%}.cf-card{position:absolute;top:50%;left:50%;cursor:pointer;filter:drop-shadow(0 18px 28px rgba(0,0,0,.16))}.cf-dim{position:absolute;inset:0;background:#ffffff9e;border-radius:inherit;pointer-events:none}.cf-caps{position:absolute;left:0;right:0;pointer-events:none}.cf-cap{position:absolute;left:50%;text-align:center;white-space:nowrap;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.pf{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;outline:none;display:grid;place-items:center}.pf.no-select{cursor:grabbing}.pf-scene{position:relative;width:100%;height:100%;perspective-origin:50% 50%;display:grid;place-items:center}.pf-card{position:absolute;cursor:pointer;will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fan{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;outline:none}.fan.no-select{cursor:grabbing}.fan-card{position:absolute;top:50%;left:50%;cursor:pointer;transform-origin:50% 50%;filter:drop-shadow(0 16px 28px rgba(0,0,0,.14));will-change:transform}.fan-dim{position:absolute;inset:0;background:#ffffff8c;border-radius:inherit;pointer-events:none}.fz{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;outline:none}.fz.no-select{cursor:grabbing}.fz-card{position:absolute;top:50%;left:50%;cursor:pointer;transform-origin:50% 50%;will-change:transform;filter:drop-shadow(0 16px 28px rgba(0,0,0,.13))}.controls{display:flex;align-items:center;gap:4px;padding:8px 20px;border-bottom:1px solid var(--border);background:var(--bg);flex-wrap:wrap}.ctrl-group{display:flex;align-items:center;gap:8px;padding:0 10px}.ctrl-label{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;min-width:52px}.ctrl-val{font-family:var(--mono);font-size:11px;color:var(--ink);min-width:32px;text-align:right}.ctrl-slider{-webkit-appearance:none;appearance:none;width:110px;height:4px;background:var(--border);border-radius:99px;outline:none;cursor:pointer;flex-shrink:0}.ctrl-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--ink);cursor:pointer;box-shadow:0 1px 3px #00000040;transition:transform .1s}.ctrl-slider:hover::-webkit-slider-thumb{transform:scale(1.15)}.ctrl-divider{width:1px;height:20px;background:var(--border);flex-shrink:0;margin:0 8px}.ctrl-seg button{min-width:96px;font-size:12px;padding:6px 14px}