/* Figma 6028:2 — 6098:2084 shell, 6100:2 controls, 6028:2074 Agent/timeline. Source geometry: 1910×949 / left373 / right275 / viewport inset16 / top55. Explicit accessibility adaptation: 12px helpers, 14px primary controls. */ /* One focus boundary per control. Compound fields own their children's ring. Scoped to SPHERE; native input semantics and high-contrast focus remain. */ #sphere-view[data-sphere-shell] :is(button,input,select,textarea,[tabindex]) { transition-property:background-color,color,opacity!important; } #sphere-view[data-sphere-shell] :is(button,input,select,textarea,[tabindex],summary,a[href],[contenteditable=true]):focus { box-shadow:none!important; border-color:#999!important; outline-color:#c4c4c4!important; } #sphere-view[data-sphere-shell] :is(button,input,select,textarea,[tabindex],summary,a[href],[contenteditable=true]):focus-visible { outline:1px solid var(--sphere-semantic-color-focus-ring,#c4c4c4)!important; outline-offset:-1px!important; box-shadow:none!important; border-color:transparent!important; } #sphere-view[data-sphere-shell] :is(.sphu-slidefield,.sph-xyz-f,.sphu-searchwrap,.sph-insp-search,.sph-prompt-editor,.sph-agent-compose):focus-within { outline:1px solid var(--sphere-semantic-color-focus-ring,#c4c4c4); outline-offset:-1px; border-color:transparent!important; box-shadow:none!important; } #sphere-view[data-sphere-shell] :is(.sphu-slidefield,.sph-xyz-f,.sphu-searchwrap,.sph-insp-search,.sph-prompt-editor,.sph-agent-compose) :is(input,textarea):is(:focus,:focus-visible) { outline:0!important; border-color:transparent!important; box-shadow:none!important; } #sphere-view[data-sphere-shell] :is(.sph-shell-context,.sphu-select,.sphu-left-context,.sph-prompt-mode) { background-color:var(--u-input); color:var(--u-text); min-height:32px; border:0; border-radius:6px; font-size:14px; } #sphere-view[data-sphere-shell] select option { background:#272727; color:#ededed; font-size:14px; } #sphere-view[data-sphere-shell] .sph-insp-search { min-height:36px; margin:8px 0 12px; padding:0 10px; border:1px solid transparent; border-radius:6px; background:var(--u-input); } #sphere-view[data-sphere-shell] .sph-insp-search input { height:34px; min-height:34px; padding:0; border:0; border-radius:0; background:transparent; color:var(--u-text); font:400 14px/1.5 Inter,Pretendard,sans-serif; } #sphere-view[data-sphere-shell] .sph-insp-search .ph { font-size:16px; color:var(--u-label); } #sphere-view[data-sphere-shell] .sph-insp-search input::placeholder { color:var(--u-label); opacity:1; } #sphere-view[data-sphere-shell] .sph-float-x { opacity:1; visibility:visible; width:28px; height:28px; color:#b5b5b5; transition:none; } #sphere-view[data-sphere-shell] .sph-shell-drawer-close { display:none; } #sphere-view[data-sphere-shell][data-sphere-compact="true"] .sph-shell-drawer-close { display:grid; place-items:center; flex:none; width:32px; height:32px; margin-left:auto; border:0; border-radius:6px; color:#b5b5b5; background:#272727; font-size:20px; } #sphere-view[data-sphere-shell] :is(.sphu-help,.sph-muted,.sphu-statusbar,.sphu-save,.sph-prompt-count,.sph-prompt-title small,.sphu-row>label) { font-size:12px; line-height:1.5; } #sphere-view[data-sphere-shell] .sphu-right .sphu-comph > :is(b,em) { font-size:12px; } #sphere-view[data-sphere-shell] :is(.sphu-viewlabel,.sph-mm-hud,.sph-angle-hud) { left:12px; transform:none; width:max-content; max-width:calc(100% - 124px); box-sizing:border-box; min-height:28px; padding:5px 10px; border:0; border-radius:6px; background:rgb(30 30 30 / .94); color:#d8d8d8; font:400 12px/18px Inter,Pretendard,sans-serif; letter-spacing:0; text-shadow:none; box-shadow:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #sphere-view[data-sphere-shell] .sphu-viewlabel { top:12px; } #sphere-view[data-sphere-shell] .sph-mm-hud { top:76px; } #sphere-view[data-sphere-shell] .sph-angle-hud { top:44px; } #sphere-view[data-sphere-shell] .sph-angle-hud:hover { background:#303030; color:#ededed; } /* Compact CAD handles: 30px hit area retained, no pastel boxes or glow. */ #sphere-view[data-sphere-shell] .sph-ehandle { width:30px; height:30px; border:0; border-radius:5px; color:#ededed; background:#272727; box-shadow:none; touch-action:none; } #sphere-view[data-sphere-shell] .sph-ehandle::after { content:''; position:absolute; inset:6px; border:1px solid #c4c4c4; border-radius:3px; pointer-events:none; } #sphere-view[data-sphere-shell] .sph-ehandle:hover { background:#3b3b3b; color:#fff; } #sphere-view[data-sphere-shell] .sph-ehandle--rotate::after { border-radius:50%; } #sphere-view[data-sphere-shell] .sph-ehandle .ph { font-size:14px; } @media (forced-colors:active) { #sphere-view[data-sphere-shell] :is(button,input,select,textarea,[tabindex],summary,a[href],[contenteditable=true]):focus-visible { outline-color:CanvasText!important; outline-width:2px!important; } #sphere-view[data-sphere-shell] :is(.sphu-slidefield,.sph-xyz-f,.sphu-searchwrap,.sph-insp-search,.sph-prompt-editor,.sph-agent-compose):focus-within { outline:2px solid CanvasText; } #sphere-view[data-sphere-shell] :is(.sphu-slidefield,.sph-xyz-f,.sphu-searchwrap,.sph-insp-search,.sph-prompt-editor,.sph-agent-compose) :is(input,textarea):focus-visible { outline:0!important; } } /* User rule: focus borders must never be blue. Keep keyboard focus visibly neutral, including hub controls and SPHERE portals mounted outside the editor root. */ #sphere-view[data-sphere-shell] :is(.sphu-pin--primary,.sphu-btn--fill) { border-color:#737373!important; background:#3b3b3b!important; color:#f5f5f5!important; } #sphere-view[data-sphere-shell] :is(.sphu-pin--primary,.sphu-btn--fill):hover { border-color:#999!important; background:#4a4a4a!important; } #sphere-view[data-sphere-shell] :is(.sph-project-identity button:hover,.sph-skp-file:hover,.sph-skp-file.is-drag,.sph-outl-root-drop.is-active,.sph-outl-drag-preview[data-mode="root"],.sph-layer-row.is-active,.sph-collab-badge.is-mine) { border-color:#737373!important; background:#303030!important; } :is(#sphere-hub-view,.sph-native-import,.sph-lib-move-menu) :is(button,input,select,textarea,[tabindex],summary,a[href]) { transition-property:background-color,color,opacity!important; } :is(#sphere-hub-view,.sph-native-import,.sph-lib-move-menu) :is(button,input,select,textarea,[tabindex],summary,a[href]):focus { border-color:#999!important; box-shadow:none!important; outline-color:#c4c4c4!important; } :is(#sphere-hub-view,.sph-native-import,.sph-lib-move-menu) :is(button,input,select,textarea,[tabindex],summary,a[href]):focus-visible { outline:2px solid #c4c4c4!important; outline-offset:2px; box-shadow:none!important; } #sphere-hub-view :is(.sph-hub-search,.sph-hub-select):focus-within { border-color:#999!important; box-shadow:none!important; } @media (forced-colors:active) { :is(#sphere-hub-view,.sph-native-import,.sph-lib-move-menu) :is(button,input,select,textarea,[tabindex],summary,a[href]):focus-visible { outline-color:CanvasText!important; border-color:CanvasText!important; } } #sphere-view[data-sphere-shell] #sph-left-assets { min-height:0; } #sphere-view[data-sphere-shell] .sph-assets-content { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; } #sphere-view[data-sphere-shell] .sph-assets-library-controls { display:grid; gap:8px; padding:12px; border-bottom:1px solid #303030; } #sphere-view[data-sphere-shell] .sph-assets-library-controls button { display:flex; align-items:center; gap:12px; width:100%; min-height:58px; border:0; border-radius:6px; background:#272727; color:#ededed; font:400 14px/1.4 Inter,Pretendard,sans-serif; padding:10px 12px; text-align:left; cursor:pointer; } #sphere-view[data-sphere-shell] .sph-assets-library-controls button:hover { background:#303030; } #sphere-view[data-sphere-shell] .sph-assets-library-controls button>i { font-size:18px; } #sphere-view[data-sphere-shell] .sph-assets-library-controls button>i:last-child { margin-left:auto; color:#a7a7a7; font-size:14px; } #sphere-view[data-sphere-shell] .sph-assets-library-controls small { display:block; color:#a7a7a7; font-size:12px; } #sphere-view[data-sphere-shell] #sph-left-assets .sphu-left-filter { padding:0 0 8px; } #sphere-view[data-sphere-shell] #sph-assets-list { padding:0; overflow:visible; min-height:0; } #sphere-view[data-sphere-shell] .sph-assets-section { margin:0; padding:12px; } #sphere-view[data-sphere-shell] .sph-assets-section h3 { display:flex; align-items:center; gap:8px; height:32px; margin:0 0 4px; font-size:14px; font-weight:400; color:#ededed; } #sphere-view[data-sphere-shell] .sph-assets-section h3 span { color:#a7a7a7; font-size:12px; } #sphere-view[data-sphere-shell] .sph-assets-section h3 button { margin-left:auto; width:28px; height:28px; border:0; border-radius:5px; background:transparent; color:#ededed; font-size:20px; cursor:pointer; } #sphere-view[data-sphere-shell] .sph-asset-row { display:flex; align-items:center; gap:8px; width:100%; min-height:32px; margin:0 0 4px; padding:4px 8px; border:0; border-radius:6px; background:transparent; color:#dedede; text-align:left; cursor:pointer; font:400 14px/1.35 Inter,Pretendard,sans-serif; } #sphere-view[data-sphere-shell] .sph-asset-row:hover { background:#303030; } #sphere-view[data-sphere-shell] .sph-asset-row[aria-pressed="true"] { background:#424242; color:white; } #sphere-view[data-sphere-shell] .sph-asset-row > :is(img,i) { width:24px; height:24px; flex-shrink:0; display:grid; place-items:center; object-fit:contain; font-size:18px; } #sphere-view[data-sphere-shell] .sph-asset-row > img { border-radius:50%; background:#333; } #sphere-view[data-sphere-shell] .sph-asset-row small { margin-left:auto; font-size:12px; color:#a7a7a7; } #sphere-view[data-sphere-shell] .sph-asset-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #sphere-view[data-sphere-shell] .sph-assets-note { margin:8px 0; font:400 12px/1.6 Inter,Pretendard,sans-serif; color:#b0b0b0; overflow-wrap:anywhere; } #sphere-view[data-sphere-shell] .sph-assets-import { flex-shrink:0; padding:8px 12px; border-top:1px solid #303030; font-size:14px; } #sphere-view[data-sphere-shell] .sph-assets-import summary { cursor:pointer; padding:8px 0; } #sphere-view[data-sphere-shell] .sph-assets-import button { display:flex; align-items:center; gap:8px; width:100%; min-height:36px; border:0; background:transparent; color:#dedede; text-align:left; font-size:14px; cursor:pointer; } #sphere-view[data-sphere-shell] .sph-assets-import small { margin-left:auto; font-size:10px; color:#aaa; } #sphere-view[data-sphere-shell] .sph-asset-dialog { position:fixed; inset:0; margin:auto; width:250px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); padding:0; overflow:auto; border:1px solid #414141; border-radius:10px; background:#1e1e1e; color:#ededed; box-shadow:0 12px 45px #0007; font-family:Inter,Pretendard,sans-serif; } #sphere-view[data-sphere-shell] .sph-asset-dialog::backdrop { background:#0005; } #sphere-view[data-sphere-shell] .sph-asset-dialog form { display:flex; flex-direction:column; min-height:0; max-height:calc(100dvh - 26px); margin:0; } #sphere-view[data-sphere-shell] .sph-asset-dialog header { display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid #303030; } #sphere-view[data-sphere-shell] .sph-asset-dialog h2 { flex:1; font-size:14px; font-weight:500; margin:0; color:#ededed; } #sphere-view[data-sphere-shell] .sph-asset-dialog button { min-height:32px; border:0; border-radius:6px; background:#303030; color:#ededed; padding:4px 8px; font-size:12px; cursor:pointer; } #sphere-view[data-sphere-shell] .sph-asset-dialog [data-asset-close] { width:28px; background:transparent; font-size:20px; } #sphere-view[data-sphere-shell] .sph-asset-dialog-body { min-height:0; overflow:auto; overscroll-behavior:contain; padding:0 12px 8px; } #sphere-view[data-sphere-shell] .sph-asset-dialog :is(header,footer) { flex-shrink:0; } #sphere-view[data-sphere-shell] .sph-asset-name { margin:12px 0 8px; padding:8px; border-radius:6px; background:#272727; color:#ededed; font-size:14px; font-weight:400; line-height:1.4; } #sphere-view[data-sphere-shell] .sph-asset-preview { height:100px; display:grid; place-items:center; position:relative; border-radius:8px; background:linear-gradient(#282828,#333); } #sphere-view[data-sphere-shell] .sph-asset-preview img { width:88px; height:88px; object-fit:cover; border-radius:50%; } #sphere-view[data-sphere-shell] .sph-asset-preview span { position:absolute; bottom:6px; right:6px; font-size:10px; color:#b8b8b8; } #sphere-view[data-sphere-shell] .sph-asset-dialog label { display:grid; grid-template-columns:minmax(0,1fr) 108px; align-items:center; gap:8px; min-height:36px; font-size:12px; font-weight:400; } #sphere-view[data-sphere-shell] .sph-asset-dialog label[hidden] { display:none; } #sphere-view[data-sphere-shell] .sph-asset-dialog :is(input,select) { min-width:0; width:100%; height:30px; border:1px solid #3d3d3d; border-radius:6px; background:#272727; color:#eee; padding:3px 7px; font-size:14px; } /* Scope the v0.15.16 global !important form-skin override to this ported Figma surface. */ #sphere-view[data-sphere-shell] #sph-asset-dialog :is(input,select) { background-color:#272727!important; color:#ededed!important; } #sphere-view[data-sphere-shell] #sph-asset-dialog select { background-image:url('/assets/sphere/figma/chevron.svg?v=20260905'); background-size:16px; background-repeat:no-repeat; background-position:right 7px center; padding-right:28px; } #sphere-view[data-sphere-shell] .sph-asset-dialog footer { display:flex; justify-content:space-between; gap:8px; padding:8px 12px; border-top:1px solid #303030; } #sphere-view[data-sphere-shell] .sph-asset-dialog [data-asset-apply] { background:#dedede; color:#171717; } #sphere-view[data-sphere-shell] .sph-asset-dialog button:disabled { opacity:.4; cursor:not-allowed; } #sphere-view[data-sphere-shell] .sph-asset-dialog [data-asset-error]:not(:empty) { color:#ffbc99; } #sphere-view[data-sphere-shell] :is(.sph-asset-row,.sph-assets-library-controls button,.sph-asset-dialog button,.sph-assets-import summary):focus-visible { outline:2px solid #c4c4c4; outline-offset:-2px; } /* The supplied Figma has a library entry but no full catalog frame. Apply its shared surfaces/controls here while retaining XITA's live model and material catalogs. */ #sphere-view[data-sphere-shell] #sph-asset-catalog { position:fixed; z-index:260; display:flex; flex-direction:column; min-height:0; padding:0; overflow:hidden; border:1px solid #414141; border-radius:10px; background:#1e1e1e; color:#ededed; box-shadow:0 14px 48px #0008; } #sphere-view[data-sphere-shell] #sph-asset-catalog[hidden] { display:none; } #sphere-view[data-sphere-shell] .sph-catalog-tabs { display:flex; flex-shrink:0; gap:6px; padding:8px 12px; border-bottom:1px solid #303030; } #sphere-view[data-sphere-shell] .sph-catalog-tabs button { height:32px; border:0; border-radius:6px; padding:0 12px; background:transparent; color:#aaa; font:400 14px Inter,Pretendard,sans-serif; cursor:pointer; } #sphere-view[data-sphere-shell] .sph-catalog-tabs [aria-selected="true"] { background:#303030; color:#ededed; } #sphere-view[data-sphere-shell] #sph-asset-catalog > :is(#sph-lib-pop,#sph-mats-pop) { position:static; inset:auto; width:100%; min-height:0; max-height:none; height:0; flex:1; display:flex; flex-direction:column; gap:0; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; } #sphere-view[data-sphere-shell] #sph-asset-catalog > [hidden] { display:none; } #sphere-view[data-sphere-shell] #sph-asset-catalog .sph-lib-head { flex-shrink:0; display:flex; align-items:center; gap:8px; padding:8px 12px; border:0; } #sphere-view[data-sphere-shell] #sph-asset-catalog .sph-lib-head b { display:none; } #sphere-view[data-sphere-shell] #sph-asset-catalog .sph-lib-head input { flex:1; min-width:0; height:32px; } #sphere-view[data-sphere-shell] #sph-asset-catalog .sph-lib-head button { width:32px; height:32px; flex-shrink:0; } #sphere-view[data-sphere-shell] #sph-asset-catalog :is(input,select) { height:32px; min-width:0; border:1px solid transparent; border-radius:6px; background-color:#272727!important; color:#ededed!important; padding:0 8px; font:400 14px Inter,Pretendard,sans-serif; } #sphere-view[data-sphere-shell] #sph-asset-catalog select { background-image:url('/assets/sphere/figma/chevron.svg?v=20260905'); background-size:16px; background-repeat:no-repeat; background-position:right 7px center; padding-right:28px; } #sphere-view[data-sphere-shell] #sph-asset-catalog :is(.sph-lib-cats,.sph-mats-modes) { display:flex; flex-wrap:wrap; align-items:center; flex-shrink:0; gap:8px; padding:0 12px 8px; border:0; overflow:visible; } #sphere-view[data-sphere-shell] #sph-asset-catalog :is(.sph-lib-cats,.sph-mats-modes) > select { flex:1; width:0; } #sphere-view[data-sphere-shell] #sph-asset-catalog .sph-lib-folderbar { flex-basis:100%; min-width:0; overflow:auto; flex-wrap:nowrap; padding-bottom:4px; } #sphere-view[data-sphere-shell] #sph-asset-catalog .sph-chip { min-height:32px; flex-shrink:0; border:0; border-radius:6px; background:#303030; color:#ddd; font:400 12px Inter,Pretendard,sans-serif; } #sphere-view[data-sphere-shell] #sph-asset-catalog .sph-chip[aria-pressed="true"] { background:#4a4a4a; color:#fff; } #sphere-view[data-sphere-shell] #sph-asset-catalog :is(.sph-lib-grid,.sph-mats-grid) { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); grid-auto-rows:minmax(160px,auto); align-content:start; gap:12px; flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:4px 12px 12px; } #sphere-view[data-sphere-shell] #sph-asset-catalog :is(.sph-lib-it,.sph-matcard) { position:relative; min-width:0; min-height:160px; height:auto; margin:0; padding:0; overflow:hidden; border:1px solid #353535; border-radius:8px; background:#272727; color:#ededed; } #sphere-view[data-sphere-shell] #sph-asset-catalog .sph-matcard-apply { display:flex; flex-direction:column; width:100%; height:100%; padding:0; border:0; background:transparent; text-align:left; cursor:pointer; color:inherit; } #sphere-view[data-sphere-shell] #sph-asset-catalog :is(.sph-lib-vis,.sph-matthumb) { display:grid; place-items:center; height:112px; width:100%; flex-shrink:0; background:#303030; } #sphere-view[data-sphere-shell] #sph-asset-catalog .sph-matthumb img { width:100%; height:112px; object-fit:cover; transform:none; } #sphere-view[data-sphere-shell] #sph-asset-catalog :is(.sph-lib-name,.sph-matcard b) { display:block; width:100%; padding:8px 10px 3px; color:#ededed; font:400 14px/1.4 Inter,Pretendard,sans-serif; } #sphere-view[data-sphere-shell] #sph-asset-catalog :is(.sph-lib-meta,.sph-matcard em) { display:block; padding:0 10px 10px; color:#b0b0b0; font:400 12px/1.5 Inter,Pretendard,sans-serif; } #sphere-view[data-sphere-shell] #sph-asset-catalog .sph-matfav { display:grid; place-items:center; position:absolute; top:6px; right:6px; width:28px; height:28px; padding:0; border:0; border-radius:6px; background:#202020cc; color:#ddd; font-size:16px; opacity:1; cursor:pointer; } #sphere-view[data-sphere-shell] #sph-asset-catalog .sph-matfav[aria-pressed="true"] { color:#ff9fbc; } #sphere-view[data-sphere-shell] #sph-asset-catalog .sph-lib-actions { display:flex; flex-wrap:wrap; gap:4px; width:100%; padding:4px 8px 0; flex-shrink:0; } #sphere-view[data-sphere-shell] #sph-asset-catalog .sph-lib-action { position:static; display:flex; align-items:center; justify-content:center; width:28px; height:28px; flex-shrink:0; padding:0; border:0; border-radius:6px; background:#202020dd; color:#ededed; font-size:14px; cursor:pointer; } #sphere-view[data-sphere-shell] #sph-asset-catalog .sph-lib-foot { flex-shrink:0; margin:0; padding:8px 12px; border-top:1px solid #303030; color:#aaa; font:400 12px/1.4 Inter,Pretendard,sans-serif; } #sphere-view[data-sphere-shell] #sph-asset-catalog :is(button,[role="button"],input,select):focus-visible { outline:2px solid #c4c4c4; outline-offset:-2px; } @media (max-height:480px) { #sphere-view[data-sphere-shell] #sph-asset-catalog .sph-lib-foot { max-height:36px; overflow:auto; } } .sph-lib-move-menu { background:#242424; color:#ededed; font:400 14px/1.4 Inter,Pretendard,sans-serif; } .sph-lib-move-menu b { color:#aaa; font-size:12px; font-weight:400; } .sph-lib-move-menu button { min-height:34px; } .sph-lib-move-menu button:focus-visible { outline:2px solid #c4c4c4; outline-offset:-2px; } #sphere-view[data-sphere-shell="figma"] { --u-bar:#1e1e1e; --u-panel:#1e1e1e; --u-well:#1e1e1e; --u-head:#1e1e1e; --u-input:#272727; --u-border:#2c2c2c; --u-btn:#303030; --u-btnh:#3b3b3b; --u-text:#ededed; --u-label:#acacac; --u-sel:#4a4a4a; --u-hover:#303030; --sph-shell-leading:373px; --sph-shell-trailing:275px; background:var(--u-panel); color:var(--u-text); color-scheme:dark; } #sphere-view[data-sphere-shell] .sphu-toolbar { display:grid; grid-template-columns:var(--sph-shell-leading) minmax(0,1fr) var(--sph-shell-trailing); height:55px; padding:0; gap:0; overflow:visible; border:0; background:var(--u-bar); } #sphere-view[data-sphere-shell] :is(.sph-shell-project,.sph-shell-center,.sph-shell-inspector,.sph-shell-tools,.sph-shell-outputs,.sph-shell-transforms) { display:flex; align-items:center; gap:6px; min-width:0; } #sphere-view[data-sphere-shell] .sph-shell-project { padding:0 12px; border-right:1px solid var(--u-border); height:100%; } #sphere-view[data-sphere-shell] .sph-shell-center { padding:0 16px; justify-content:space-between; } #sphere-view[data-sphere-shell] .sph-shell-view-modes { display:flex; align-items:center; gap:2px; flex:none; padding-right:10px; border-right:1px solid #ffffff0d; } #sphere-view[data-sphere-shell] .sph-shell-view-modes button { min-height:30px; border:0; border-radius:6px; background:transparent; padding:4px 8px; font:500 14px/1.4 Inter,Pretendard,sans-serif; color:#aaa; } #sphere-view[data-sphere-shell] .sph-shell-view-modes button[aria-pressed="true"] { background:#ffffff1a; color:#ededed; } #sphere-view[data-sphere-shell] .sph-shell-view-modes #sph-camview>i { display:none; } #sphere-view[data-sphere-shell] .sph-shell-inspector { padding:0 12px; border-left:1px solid var(--u-border); height:100%; } #sphere-view[data-sphere-shell] .sph-shell-context { flex:1; width:0; min-width:0; height:30px; padding:0 8px; border:0; border-radius:6px; background:var(--u-input); font-size:14px; font-weight:400; color:var(--u-text); } #sphere-view[data-sphere-shell] .sph-shell-panel-heading { display:flex; align-items:center; gap:8px; min-height:46px; padding:8px 12px; border-block:1px solid var(--u-border); font-size:12px; color:var(--u-label); } #sphere-view[data-sphere-shell] .sphu-right [data-sph-tabbed][hidden] { display:none; } #sphere-view[data-sphere-shell] .sphu-logo { font-size:0; gap:0; } #sphere-view[data-sphere-shell] .sphu-logo-ip { width:20px; height:20px; } #sphere-view[data-sphere-shell] .sphu-title { display:block; width:0; flex:1; min-width:35px; height:32px; border:1px solid transparent; background:transparent; font-size:14px; padding:0 4px; text-overflow:ellipsis; } #sphere-view[data-sphere-shell] .sphu-title:focus { border-color:#999; background:var(--u-input); } #sphere-view[data-sphere-shell] .sphu-save { display:block; max-width:88px; overflow:hidden; text-overflow:ellipsis; font-size:12px; color:var(--u-label); } #sphere-view[data-sphere-shell] :is(.sph-shell-button,.sphu-toolbar .sphu-tool,.sphu-toolbar .sphu-icobtn) { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:auto; min-width:30px; height:30px; padding:0 8px; gap:5px; border:0; border-radius:6px; background:transparent; color:var(--u-text); font:500 14px/1.3 Inter,Pretendard,sans-serif; cursor:pointer; white-space:nowrap; } #sphere-view[data-sphere-shell] :is(.sph-shell-button,.sphu-toolbar button):hover { background:var(--u-hover); } #sphere-view[data-sphere-shell] :is(.sph-shell-button[aria-expanded="true"],.sphu-toolbar .is-on) { background:var(--u-sel); color:#fff; } #sphere-view[data-sphere-shell] .sphu-toolbar button:disabled { opacity:.4; cursor:default; } #sphere-view[data-sphere-shell] :is(button,input,select,textarea):focus-visible { outline:2px solid #c4c4c4; outline-offset:2px; } #sphere-view[data-sphere-shell] .sph-shell-transforms { gap:2px; background:var(--u-input); border-radius:6px; } #sphere-view[data-sphere-shell] .sph-shell-outputs :is(#sph-share,#sph-capture) { background:var(--u-btn); } #sphere-view[data-sphere-shell] .sph-shell-menu-panel { position:fixed; z-index:180; width:250px; overflow:auto; box-sizing:border-box; padding:6px; background:#242424; border:1px solid #404040; border-radius:10px; box-shadow:0 8px 32px #0005; scrollbar-width:thin; } #sphere-view[data-sphere-shell] .sph-shell-menu-panel[hidden] { display:none; } #sphere-view[data-sphere-shell] [data-sph-menu-anchor] { z-index:160; box-sizing:border-box; background:#242424; border:1px solid #404040; border-radius:10px; padding:6px; box-shadow:0 8px 32px #0005; overscroll-behavior:contain; } #sphere-view[data-sphere-shell] [data-sph-menu-anchor] .sphu-mi { min-height:34px; height:auto; padding:8px; color:var(--u-text); font-size:14px; font-weight:400; border-radius:6px; } #sphere-view[data-sphere-shell] [data-sph-menu-anchor] .sphu-mi:hover { background:var(--u-hover); } #sphere-view[data-sphere-shell] [data-sph-menu-anchor] :is(b,.sphu-mh) { font-size:12px; font-weight:500; } #sphere-view[data-sphere-shell] [data-sph-menu-anchor] button:disabled { opacity:.4; } #sphere-view[data-sphere-shell] .sphu-toolbar .sph-shell-menu-item { display:flex; justify-content:flex-start; width:100%; min-height:34px; height:auto; padding:8px; text-align:left; white-space:normal; line-height:1.4; } #sphere-view[data-sphere-shell] .sph-shell-menu-item .ph { flex:0 0 18px; font-size:16px; } #sphere-view[data-sphere-shell] .sph-shell-menu-item em { display:none; } #sphere-view[data-sphere-shell] .sph-shell-menu-label { padding:12px 8px 6px; color:#a5a5a5; font-size:12px; border-top:1px solid #373737; margin-top:6px; } #sphere-view[data-sphere-shell] .sphu-main { top:55px; bottom:var(--sph-shell-timeline-height,0px); background:var(--u-panel); } #sphere-view[data-sphere-shell] .sphu-panel { border:0; background:var(--u-panel); } #sphere-view[data-sphere-shell] .sphu-left { width:373px; } #sphere-view[data-sphere-shell] .sphu-right { --sph-inspector-user-width:275px; --sph-insp-bg:var(--u-panel); --sph-insp-control:var(--u-input); --sph-insp-hover:var(--u-hover); --sph-insp-divider:var(--u-border); --sph-insp-text:var(--u-text); --sph-insp-secondary:#acacac; --sph-insp-muted:#979797; width:var(--sph-inspector-user-width); max-width:none; font-family:Inter,Pretendard,sans-serif; } #sphere-view[data-sphere-shell] .sphu-viewport { margin:0 16px 16px; border-radius:12px; } #sphere-view[data-sphere-shell] .sphu-statusbar { left:10px; right:auto; bottom:calc(var(--sph-overlay-safe,0px) + 10px); max-width:calc(100% - 20px); width:max-content; height:24px; border:1px solid #414141; border-radius:6px; background:#1e1e1ee8; pointer-events:none; font-size:12px; z-index:65; } #sphere-view[data-sphere-shell] .sphu-split { width:0; min-width:0; flex-basis:0; margin:0; overflow:visible; position:relative; z-index:8; } #sphere-view[data-sphere-shell] .sphu-split::before { content:""; position:absolute; inset:0; width:1px; background:#ffffff0d; pointer-events:none; } #sphere-view[data-sphere-shell] .sphu-split::after { content:""; position:absolute; inset:0 -4px; width:8px; cursor:col-resize; background:transparent; } #sphere-view[data-sphere-shell] .sphu-split:is(:hover,:active,:focus-visible,.is-dragging)::after { inset:0 -4px; width:8px; background:transparent; border-radius:0; } #sphere-view[data-sphere-shell] .sphu-split:focus-visible { outline:1px solid #999; outline-offset:0; } #sphere-view[data-sphere-shell] .sphu-right .sphu-comp { border:0; border-bottom:1px solid #ffffff0d; border-radius:0; margin:0; box-shadow:none; } #sphere-view[data-sphere-shell] .sph-assets-section + .sph-assets-section { border-top:1px solid #ffffff0d; } #sphere-view[data-sphere-shell] :is(.sphu-left-tabs,.sphu-right .sphu-tabbar[data-sph-tabbed]) { height:46px; min-height:46px; padding:8px 12px; border-block:1px solid var(--u-border); gap:3px; background:var(--u-panel); } #sphere-view[data-sphere-shell] :is(.sphu-lefttab,.sphu-right .sphu-insptab) { flex:0 0 auto; border:0; border-radius:6px; height:28px; padding:0 8px; font-size:14px; color:var(--u-label); } #sphere-view[data-sphere-shell] :is(.sphu-lefttab.is-on,.sphu-right .sphu-insptab.is-on) { background:var(--u-input); color:var(--u-text); } #sphere-view[data-sphere-shell] .sphu-left .sphu-tabbar.sphu-left-tabs { flex-wrap:wrap; height:auto; min-height:46px; flex-shrink:0; align-content:flex-start; row-gap:6px; } #sphere-view[data-sphere-shell] .sphu-right .sphu-insptab { padding:0 5px; gap:3px; } #sphere-view[data-sphere-shell] .sphu-right .sphu-insptab i { display:none; } #sphere-view[data-sphere-shell] .sphu-right .sphu-insptab--all i { display:inline-block; font-size:14px; } #sphere-view[data-sphere-shell] .sph-dockgrip { margin-left:auto; } #sphere-view[data-sphere-shell] .sph-shell-object-nav { display:flex; align-items:center; padding:12px; gap:8px; border-bottom:1px solid var(--u-border); } #sphere-view[data-sphere-shell] .sph-shell-object-nav[hidden] { display:none; } #sphere-view[data-sphere-shell] .sph-scene-stats summary { padding:8px 0; color:var(--u-label); font-size:12px; cursor:pointer; } #sphere-view[data-sphere-shell] .sph-scene-stats summary:focus-visible { outline:2px solid #c4c4c4; outline-offset:2px; } #sphere-view[data-sphere-shell] .sph-scene-dashboard { background:#1e1e1e; border-color:#303030; } #sphere-view[data-sphere-shell] .sph-scene-dashboard-head span { color:#a7a7a7; } #sphere-view[data-sphere-shell] .sph-scene-dashboard-head b { color:#ededed; } #sphere-view[data-sphere-shell] .sph-scene-dashboard-grid article { background:#272727; border-color:#383838; border-radius:6px; } #sphere-view[data-sphere-shell] .sph-scene-dashboard-grid article > b { color:#ededed; } #sphere-view[data-sphere-shell] .sph-scene-dashboard-grid article > span { color:#a7a7a7; font-size:12px; } #sphere-view[data-sphere-shell] .sph-scene-dashboard-grid article > i { color:#999; } #sphere-view[data-sphere-shell] .sph-scene-stats summary { border-radius:6px; padding-inline:6px; } #sphere-view[data-sphere-shell] .sph-scenes-scroll { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; } #sphere-view[data-sphere-shell] #sph-left-scenes > .sphu-left-filter { flex:none; background:var(--u-panel); } #sphere-view[data-sphere-shell] .sph-scenes-scroll .sph-scenes-list { display:block; flex:none; overflow:visible; } #sphere-view[data-sphere-shell] .sph-scenes-scroll .sph-scene-head { position:static; background:var(--u-panel); } #sphere-view[data-sphere-shell] .sph-scenes-scroll .sph-scene-add { display:none; } /* The fixed footer owns New Scene. */ #sphere-view[data-sphere-shell] .sph-shell-object-nav label { font-size:12px; color:var(--u-label); white-space:nowrap; } #sphere-view[data-sphere-shell] .sph-shell-object-nav select { flex:1; min-width:0; width:0; font-size:14px; min-height:32px; background:var(--u-input); border-radius:6px; border:0; } #sphere-view[data-sphere-shell] :is(.sphu-search,.sphu-left-filter input) { font-size:14px; height:34px; border-radius:6px; background:var(--u-input); } #sphere-view[data-sphere-shell] :is(.sphu-tree,.sphu-panelfoot) { background:var(--u-panel); } #sphere-view[data-sphere-shell] .sph-outl-row { min-height:32px; border-radius:8px; font-size:14px; } #sphere-view[data-sphere-shell] .sph-outl-row:is(.is-child,.is-nested-group)::before { content:""; position:absolute; left:calc(var(--sph-indent,24px) - 8px); top:0; height:50%; width:5px; border-left:1px dotted #666; border-bottom:1px dotted #666; pointer-events:none; } #sphere-view[data-sphere-shell] .sph-outl-group>.sph-outl-toggle { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; flex:none; border-radius:4px; background:#ffffff14; } #sphere-view[data-sphere-shell] .sph-outl-group>:is(.ph-folder,.ph-folder-open) { color:#999; } #sphere-view[data-sphere-shell] .sph-outl-group[aria-selected="true"]>span::after { content:none; } #sphere-view[data-sphere-shell] .sph-outl-row.is-sel { background:var(--u-sel); color:var(--u-text); } #sphere-view[data-sphere-shell] .sphu-shotrow.is-sel { background:var(--u-sel); color:var(--u-text); } #sphere-view[data-sphere-shell] :is(.sph-chip.is-on,#sph-shot-mid.is-on,.sph-ease-presets .sphu-btn.is-on) { color:var(--u-text); } #sphere-view[data-sphere-shell] .sph-chip--mode.is-on { color:var(--u-text) !important; } #sphere-view[data-sphere-shell] .sphu-right .sphu-row { min-height:38px; gap:6px; flex-wrap:wrap; } #sphere-view[data-sphere-shell] .sphu-right .sphu-row>label { width:34%; padding-left:3px; font-size:12px; font-weight:400; } #sphere-view[data-sphere-shell] .sphu-right :is(.sphu-select,.sphu-num,.sphu-textinput,.sphu-valin) { height:30px; border-radius:6px; font-size:14px; } #sphere-view[data-sphere-shell] .sphu-right .sphu-num { width:68px; } #sphere-view[data-sphere-shell] .sphu-right :is(.sphu-select,.sphu-num,.sphu-textinput,.sphu-valin) { font-weight:400; background:var(--u-input); } #sphere-view[data-sphere-shell] .sphu-right .sphu-field { flex-wrap:wrap; } #sphere-view[data-sphere-shell] .sphu-right .sphu-comph { min-height:46px; } #sphere-view[data-sphere-shell] .sphu-right .sphu-comph>b { font-size:12px; font-weight:500; } #sphere-view[data-sphere-shell] .sphu-right .sphu-pin { font-size:12px; padding:0 6px; } #sphere-view[data-sphere-shell] .sphu-right .sphu-pin--primary { background:var(--u-btn); color:var(--u-text); font-weight:500; } #sphere-view[data-sphere-shell] :is(.sph-layerbar,.sph-layerbar-head,.sph-layerbar-list) { background:var(--u-panel); border-color:var(--u-border); box-shadow:none; } #sphere-view[data-sphere-shell] .sph-layer-row.is-active { background:var(--u-input); border-color:#434343; } #sphere-view[data-sphere-shell] .sph-layer-name b { font-weight:500; font-size:12px; } #sphere-view[data-sphere-shell] .sph-layer-name small { background:var(--u-sel); color:var(--u-text); } #sphere-view[data-sphere-shell] .sphu-right #sph-insp-pins { gap:4px; padding:8px 10px; height:46px; } #sphere-view[data-sphere-shell] .sphu-left-panel { background:var(--u-panel); } /* Inspector control grammar from Figma 6098:1153 (Ambient Shadows): 48px rows, 24px icon wells, adjacent disclosure, 32×16 switches, #272727 wells. Continuous values remain native ranges, not switches or progress indicators. */ #sphere-view[data-sphere-shell] .sphu-right .sphu-comph { padding:0 2px; gap:8px; } #sphere-view[data-sphere-shell] .sphu-right .sphu-insp { padding:0; } #sphere-view[data-sphere-shell] .sphu-right .sphu-comp>.sphu-comph { padding-inline:12px; border-top:0; } #sphere-view[data-sphere-shell] .sphu-right .sphu-comp>.sphu-compb { padding:0 12px 16px; } #sphere-view[data-sphere-shell] .sphu-right .sphu-comph > :is(i.ph:not(.sphu-fold),.sph-insp-icon) { order:0; display:inline-flex; align-items:center; justify-content:center; flex:0 0 24px; width:24px; height:24px; border-radius:8px; background:#ffffff14; color:#b9b9b9; font-size:16px; } #sphere-view[data-sphere-shell] .sph-insp-icon img { display:block; width:16px; height:16px; } #sphere-view[data-sphere-shell] .sphu-right .sphu-comph > b { font-size:12px; font-weight:400; color:#c6c6c6; } #sphere-view[data-sphere-shell] .sphu-right .sphu-comph > .sphu-fold { order:2; margin-left:0; width:16px; color:#8c8c8c; } #sphere-view[data-sphere-shell] .sphu-right .sphu-comph > em { order:3; margin-left:auto; font-size:12px; font-weight:400; } #sphere-view[data-sphere-shell] .sphu-right .sphu-row { gap:8px; min-height:42px; } #sphere-view[data-sphere-shell] .sphu-right .sphu-row > label { width:34%; padding-left:2px; font-size:12px; line-height:1.5; font-weight:400; color:#ababab; } #sphere-view[data-sphere-shell] .sphu-right :is(.sphu-select,.sphu-num,.sphu-textinput,.sphu-valin) { border-radius:6px; font-size:14px; font-weight:400; } #sphere-view[data-sphere-shell] .sphu-right .sphu-slidefield { box-sizing:border-box; min-height:32px; padding:0; gap:4px; border:1px solid transparent; border-radius:6px; background:var(--u-input); align-items:center; } #sphere-view[data-sphere-shell] .sphu-right .sphu-slidefield:hover { border-color:#414141; } #sphere-view[data-sphere-shell] .sphu-right .sphu-slidefield:focus-within { border-color:#999; } #sphere-view[data-sphere-shell] .sphu-right .sphu-slidefield:has(input:disabled) { border-color:transparent; } #sphere-view[data-sphere-shell] .sphu-right .sphu-slidefield > :is(.sphu-num,.sphu-val) { order:-1; flex:0 0 58px; width:58px; min-width:0; max-width:58px; padding:0 6px; margin:0; text-align:center; font-size:14px; font-weight:400; font-style:normal; color:#dedede; font-variant-numeric:tabular-nums; } #sphere-view[data-sphere-shell] .sphu-right .sph-slider { appearance:none; -webkit-appearance:none; width:0; min-width:40px; flex:1 1 40px; height:28px; margin:0; padding:0; border:0; border-radius:6px; background:transparent; cursor:ew-resize; } #sphere-view[data-sphere-shell] .sphu-right .sph-slider::-webkit-slider-runnable-track { height:28px; border:0; border-radius:6px; background:#303030; } #sphere-view[data-sphere-shell] .sphu-right .sph-slider::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:18px; height:28px; margin-top:0; border:0; border-radius:6px; background:#505050; box-shadow:none; } #sphere-view[data-sphere-shell] .sphu-right .sph-slider::-moz-range-track { height:28px; border:0; border-radius:6px; background:#303030; } #sphere-view[data-sphere-shell] .sphu-right .sph-slider::-moz-range-thumb { width:18px; height:28px; border:0; border-radius:6px; background:#505050; box-shadow:none; } #sphere-view[data-sphere-shell] .sphu-right .sph-slider:disabled { opacity:.55; cursor:not-allowed; } #sphere-view[data-sphere-shell] .sphu-right .sphu-hint { padding:6px 2px 10px; font-size:12px; line-height:1.6; font-weight:400; } #sphere-view[data-sphere-shell] .sphu-right .sph-insp-switch { appearance:none; -webkit-appearance:none; position:relative; display:block; flex:0 0 32px; box-sizing:content-box; width:32px; height:16px; padding:0; margin:0; border:6px solid transparent; border-radius:20px; background:#383838; background-clip:padding-box; cursor:pointer; } #sphere-view[data-sphere-shell] .sphu-right .sph-insp-switch::before { content:""; display:block; width:16px; height:16px; border-radius:50%; background:#868686; transform:translateX(0); } #sphere-view[data-sphere-shell] .sphu-right .sph-insp-switch:checked { background-color:#2589ff; } #sphere-view[data-sphere-shell] .sphu-right .sph-insp-switch:checked::before { background:#fff; transform:translateX(16px); } #sphere-view[data-sphere-shell] .sphu-right .sph-insp-switch:disabled { opacity:.45; cursor:not-allowed; } @media (forced-colors:active) { #sphere-view[data-sphere-shell] .sphu-right .sph-slider::-webkit-slider-runnable-track { background:CanvasText; } #sphere-view[data-sphere-shell] .sphu-right .sph-slider::-moz-range-track { background:CanvasText; } #sphere-view[data-sphere-shell] .sphu-right .sph-insp-switch { appearance:auto; forced-color-adjust:auto; } #sphere-view[data-sphere-shell] .sphu-right .sph-insp-switch::before { content:none; } } #sphere-view[data-sphere-shell] :is(.sph-shell-agent,.sph-shell-prompt) { overflow:auto; padding:12px; gap:16px; } #sphere-view[data-sphere-shell] .sph-shell-agent-intro h2 { margin:12px 0 8px; font-size:16px; line-height:1.5; font-weight:600; color:var(--u-text); } #sphere-view[data-sphere-shell] .sph-shell-agent-intro p { color:#b5b5b5; font-size:14px; line-height:1.7; margin:0 0 12px; } #sphere-view[data-sphere-shell] .sph-shell-agent-intro .sph-shell-agent-note { font-size:12px; color:#999; } #sphere-view[data-sphere-shell] .sph-agent-suggestions { display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 0 20px; } #sphere-view[data-sphere-shell] .sph-agent-suggestions button { max-width:100%; min-height:34px; padding:6px 14px; border:0; border-radius:18px; background:#272727; color:#c9c9c9; font:400 14px/1.5 Inter,Pretendard,sans-serif; cursor:pointer; } #sphere-view[data-sphere-shell] .sph-agent-suggestions button:hover { background:#383838; color:#ededed; } /* Agent composer: a chat input. The textarea grows with its text (no manual resize handle, so the footer never drifts), the footer keeps model + review chips on the left and clear/send on the right, and the send button carries the credit cost of the current review mode (director 2026-09-11: "크레딧이 얼마 차감되는지도 떠야함"). */ #sphere-view[data-sphere-shell] .sph-agent-compose { display:flex; flex-direction:column; gap:0; margin:0 0 10px; padding:10px 12px 10px; border:1px solid #353535; border-radius:14px; background:#272727; } #sphere-view[data-sphere-shell] .sph-agent-compose:focus-within { border-color:#4a4a4a; } #sphere-view[data-sphere-shell] .sph-agent-compose label { display:flex; justify-content:space-between; gap:8px; font-size:12px; line-height:16px; color:#dedede; } #sphere-view[data-sphere-shell] .sph-agent-compose label span { color:#898a8b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #sphere-view[data-sphere-shell] .sph-agent-compose textarea { display:block; width:100%; box-sizing:border-box; min-height:44px; max-height:220px; padding:8px 0; margin:2px 0 0; resize:none; overflow-y:auto; border:0; background:transparent; color:#ededed; font:400 14px/1.6 Inter,Pretendard,sans-serif; } #sphere-view[data-sphere-shell] .sph-agent-compose textarea::placeholder { color:#7d7f82; } #sphere-view[data-sphere-shell] .sph-agent-compose footer { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:8px; border-top:1px solid #ffffff0d; } #sphere-view[data-sphere-shell] .sph-agent-compose-tools { display:flex; align-items:center; gap:6px; min-width:0; flex:1 1 auto; flex-wrap:wrap; } #sphere-view[data-sphere-shell] .sph-agent-compose-actions { display:flex; align-items:center; gap:6px; flex:none; margin-left:auto; } #sphere-view[data-sphere-shell] .sph-agent-compose button { min-height:32px; padding:0 10px; border:1px solid rgba(255,255,255,.08); border-radius:8px; background:rgba(255,255,255,.05); color:#e6e6e6; font:500 12px/16px Inter,Pretendard,sans-serif; cursor:pointer; } #sphere-view[data-sphere-shell] .sph-agent-compose button:hover { background:rgba(255,255,255,.09); } #sphere-view[data-sphere-shell] .sph-agent-compose button:disabled { opacity:.55; cursor:not-allowed; } #sphere-view[data-sphere-shell] .sph-agent-compose #sph-agent-rules { white-space:nowrap; } #sphere-view[data-sphere-shell] .sph-agent-compose #sph-agent-rules[aria-pressed="true"] { border-color:rgba(214,255,102,.45); color:#d6ff66; background:rgba(214,255,102,.08); } #sphere-view[data-sphere-shell] .sph-agent-compose #sph-agent-clear { width:32px; padding:0; display:inline-flex; align-items:center; justify-content:center; font-size:14px; color:#aaa; } #sphere-view[data-sphere-shell] .sph-agent-compose #sph-agent-clear { display:none; } /* director 2026-09-12: no × needed; the box empties after send */ #sphere-view[data-sphere-shell] .sph-agent-compose #sph-agent-send { position:relative; display:inline-flex; align-items:center; gap:8px; padding:0 6px 0 12px; border:0; border-radius:16px; background:#ededed; color:#141414; font-weight:600; } #sphere-view[data-sphere-shell] .sph-agent-compose #sph-agent-send:hover { background:#fff; } #sphere-view[data-sphere-shell] .sph-agent-compose #sph-agent-send:disabled { background:#353535; color:#8a8a8a; opacity:1; } #sphere-view[data-sphere-shell] .sph-agent-compose #sph-agent-send .ph { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#141414; color:#ededed; font-size:13px; } #sphere-view[data-sphere-shell] .sph-agent-compose #sph-agent-send:disabled .ph { background:#4a4a4a; color:#9a9a9a; } #sphere-view[data-sphere-shell] .sph-agent-compose #sph-agent-send[data-cost="paid"] { background:#d6ff66; } #sphere-view[data-sphere-shell] .sph-agent-compose #sph-agent-send[data-cost="paid"]:hover { background:#e2ff8a; } #sphere-view[data-sphere-shell] .sph-agent-compose #sph-agent-send[data-cost="paid"]:disabled { background:#353535; } #sphere-view[data-sphere-shell] .sph-agent-compose #sph-agent-send[data-cost="short"] { background:#3a2a2a; color:#ffb4a8; } #sphere-view[data-sphere-shell] .sph-agent-compose #sph-agent-send[data-cost="short"] .ph { background:#5a3030; color:#ffd2ca; } #sphere-view[data-sphere-shell] .sph-agent-compose #sph-agent-send[data-running="true"] { background:#353535; color:#c9c9c9; opacity:1; } #sphere-view[data-sphere-shell] .sph-agent-compose .sph-agent-send-cost { white-space:nowrap; } #sphere-view[data-sphere-shell] .sph-agent-compose #sph-agent-send[data-running="true"] .ph { background:#4a4a4a; color:#d6ff66; animation:sph-agent-send-spin 1s linear infinite; } @keyframes sph-agent-send-spin { to { transform:rotate(360deg); } } @media (prefers-reduced-motion: reduce) { #sphere-view[data-sphere-shell] .sph-agent-compose #sph-agent-send[data-running="true"] .ph { animation:none; } } #sphere-view[data-sphere-shell] .sph-agent-send-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } #sphere-view[data-sphere-shell] #sph-left-agent { padding:0; gap:0; overflow:hidden; min-height:0; } #sphere-view[data-sphere-shell] .sph-shell-agent-intro { flex:1; min-height:0; overflow:auto; padding:20px 16px 12px; text-align:center; } #sphere-view[data-sphere-shell] .sph-shell-agent-intro h2 { font-size:14px; font-weight:500; margin:8px 0 12px; } #sphere-view[data-sphere-shell] .sph-shell-agent-intro>p { font-size:12px; } #sphere-view[data-sphere-shell] .sph-agent-input-area { flex:none; padding:12px 8px 16px; border-top:1px solid #ffffff0d; } #sphere-view[data-sphere-shell] .sph-agent-input-area>.sph-shell-agent-note { color:#aaa; font:400 12px/1.5 Inter,Pretendard,sans-serif; margin:0 4px 10px; } #sphere-view[data-sphere-shell] .sph-agent-input-area .sph-agent-compose { margin:0; } #sphere-view[data-sphere-shell] .sph-shell-prompt { gap:12px; } #sphere-view[data-sphere-shell] .sph-shell-prompt .sph-promptdock { position:relative; inset:auto; transform:none; width:100%; max-width:none; margin:0; flex-shrink:0; } #sphere-view[data-sphere-shell] .sph-shell-prompt .sph-prompt-shell { background:var(--u-panel); border:1px solid #353535; border-radius:10px; box-shadow:none; } #sphere-view[data-sphere-shell] .sph-shell-prompt .sph-prompt-composer-head { height:auto; min-height:0; flex:0 0 auto; flex-direction:column; align-items:stretch; gap:10px; padding:12px; } #sphere-view[data-sphere-shell] .sph-shell-prompt .sph-prompt-head-actions { display:flex; flex-wrap:wrap; width:100%; } #sphere-view[data-sphere-shell] .sph-shell-prompt .sph-prompt-mode { display:block; flex:1; width:0; min-width:100px; font-size:14px; } #sphere-view[data-sphere-shell] .sph-shell-prompt .sph-prompt-title strong { font-size:14px; } #sphere-view[data-sphere-shell] .sph-shell-prompt .sph-prompt-title small { font-size:12px; } #sphere-view[data-sphere-shell] .sph-shell-prompt .sph-promptrow { display:flex; flex-wrap:wrap; height:auto; gap:8px; padding:8px; } #sphere-view[data-sphere-shell] .sph-shell-prompt .sph-prompt-actions { flex-wrap:wrap; margin:0; } #sphere-view[data-sphere-shell] .sph-shell-prompt .sph-prompt-actions--output { width:100%; } #sphere-view[data-sphere-shell] .sph-shell-prompt .sph-prompt-actions--output button { flex:1 1 auto; } #sphere-view[data-sphere-shell] .sph-shell-prompt .sph-pb { font-size:12px; min-height:32px; } #sphere-view[data-sphere-shell] .sph-shell-prompt #sph-prompt { font-size:14px; line-height:1.7; height:clamp(180px,32vh,320px); min-height:140px; max-height:60vh; resize:vertical; } #sphere-view[data-sphere-shell] .sph-shell-prompt :is(.sph-prompt-composer-head,.sph-promptbox,.sph-promptrow) { background:transparent; color:#ededed; } #sphere-view[data-sphere-shell] .sph-shell-prompt .sph-promptbox { padding:0 12px 12px; } #sphere-view[data-sphere-shell] .sph-shell-prompt .sph-prompt-title { gap:8px; } #sphere-view[data-sphere-shell] .sph-shell-prompt .sph-prompt-title>span:last-child { display:grid; gap:3px; } #sphere-view[data-sphere-shell] .sph-shell-prompt .sph-prompt-mark { width:24px; height:24px; border:0; border-radius:6px; background:#303030; color:#c9c9c9; } #sphere-view[data-sphere-shell] .sph-shell-prompt .sph-prompt-editor { display:block; padding:0; border:1px solid transparent; border-radius:6px; background:#272727; box-shadow:none; } #sphere-view[data-sphere-shell] .sph-shell-prompt #sph-prompt { box-sizing:border-box; width:100%; padding:12px; border:0; border-radius:6px; background:transparent; color:#dedede; font-weight:400; } #sphere-view[data-sphere-shell] .sph-shell-prompt .sph-promptrow { padding:12px 0 0; gap:12px; } #sphere-view[data-sphere-shell] .sph-shell-prompt .sph-prompt-actions { display:flex; gap:4px; width:100%; } #sphere-view[data-sphere-shell] .sph-shell-prompt .sph-pb { border:0; border-radius:6px; background:#303030; color:#c9c9c9; font-weight:400; } #sphere-view[data-sphere-shell] .sph-shell-prompt .sph-pb:hover { background:#414141; color:#fff; } #sphere-view[data-sphere-shell] .sph-shell-prompt .sph-pb--primary { background:#4a4a4a; color:#fff; } #sphere-view[data-sphere-shell] .sph-shell-prompt .sph-pw { height:auto; min-height:24px; padding:3px 6px; border:0; border-radius:4px; background:#272727; color:#b5b5b5; font:400 12px/1.5 Inter,Pretendard,sans-serif; white-space:normal; } #sphere-view[data-sphere-shell] .sph-shell-prompt .sph-pw--gap::before { content:none; } #sphere-view[data-sphere-shell] .sph-shell-prompt .sph-pw--error { color:#ffb7ae; } #sphere-view[data-sphere-shell] .sph-shell-icon { display:block; width:16px; height:16px; flex:0 0 16px; object-fit:contain; } #sph-prompt-dialog { margin:auto; padding:0; border:1px solid #444; border-radius:12px; width:min(900px,calc(100vw - 24px)); max-width:calc(100vw - 24px); height:auto; max-height:calc(100dvh - 24px); background:#272727; color:#ededed; color-scheme:dark; overflow:auto; } #sph-prompt-dialog::backdrop { background:#0009; } #sphere-view #sph-history-dialog { margin:auto; padding:0; width:min(600px,calc(100vw - 24px)); max-width:calc(100vw - 24px); height:min(620px,calc(100dvh - 24px)); max-height:calc(100dvh - 24px); border:1px solid #444; border-radius:12px; background:#1e1e1e; color:#ededed; color-scheme:dark; overflow:hidden; } #sph-history-dialog[open] { display:flex; flex-direction:column; } #sph-history-dialog::backdrop { background:#0009; } #sphere-view #sph-history-dialog > header { display:flex; align-items:center; justify-content:space-between; gap:16px; flex:none; padding:12px 16px; border-bottom:1px solid #303030; } #sphere-view #sph-history-title { margin:0; color:#ededed; font-size:14px; font-weight:500; line-height:1.5; } #sphere-view #sph-history-dialog button { font-family:inherit; } #sphere-view #sph-history-close { min-width:44px; min-height:32px; border:0; border-radius:6px; background:#303030; color:#ededed; font-size:12px; } #sphere-view .sph-history-tabs { display:flex; gap:4px; padding:12px 16px 0; flex:none; } #sphere-view .sph-history-tabs button { padding:6px 12px; min-height:34px; border:0; border-radius:6px; background:transparent; color:#bcbcbc; font-size:14px; font-weight:400; } #sphere-view .sph-history-tabs button[aria-selected="true"] { background:#303030; color:#fff; } #sphere-view .sph-history-note { margin:8px 16px 12px; color:#bcbcbc; font-size:12px; line-height:1.5; flex:none; } #sphere-view .sph-history-content { min-height:0; flex:1; overflow:auto; overscroll-behavior:contain; padding:0 12px 12px; scrollbar-width:thin; } #sphere-view #sph-history-dialog .sph-prompthist-pop { position:static; inset:auto; width:100%; max-width:none; max-height:none; overflow:visible; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; } #sphere-view #sph-history-dialog .sph-prompthist-pop[hidden] { display:none; } #sphere-view #sph-history-dialog .sph-prompthist-pop > b { display:none; } #sphere-view #sph-history-dialog .sph-ph-row { width:100%; height:auto; min-height:40px; padding:10px; white-space:normal; overflow-wrap:anywhere; color:#ededed; font-size:14px; font-weight:400; line-height:1.5; text-align:left; } #sphere-view #sph-history-dialog .sph-gh-row b { white-space:normal; font-size:14px; font-weight:500; } #sphere-view #sph-history-dialog .sph-gh-row > span { flex:1 1 0; min-width:0; } #sphere-view #sph-history-dialog .sph-gh-row > :is(a,em) { flex:0 0 auto; white-space:nowrap; } #sphere-view #sph-history-dialog .sph-gh-row > em { width:auto; height:auto; } #sphere-view #sph-history-dialog :is(.sph-gh-row small,.sph-gh-row em,.sph-gh-banner,.sph-empty) { font-size:12px; color:#bcbcbc; } #sphere-view #sph-history-dialog .sph-gh-row a { display:inline-flex; align-items:center; min-height:32px; padding:0 8px; font-size:12px; color:#ededed; } #sphere-view #sph-history-dialog :is(.sph-gh-rate,.sph-gh-why) { gap:6px; padding:0 10px 10px; } #sphere-view #sph-history-dialog :is(.sph-gh-rate,.sph-gh-why) button { min-height:30px; height:auto; padding:4px 10px; font-size:12px; } #sphere-view #sph-history-dialog :is(button,a):focus-visible { outline:2px solid #c4c4c4; outline-offset:-2px; } #sph-prompt-dialog .sph-prompt-shell.is-full { position:static; inset:auto; transform:none; width:100%; height:auto; max-height:none; border:0; border-radius:0; background:#272727; box-shadow:none; } #sph-prompt-dialog .sph-prompt-composer-head { height:auto; min-height:0; flex-wrap:wrap; gap:10px; padding:12px; background:#272727; } #sph-prompt-dialog .sph-prompt-title strong { color:#ededed; font-size:14px; } #sph-prompt-dialog .sph-prompt-title small { color:#aaa; font-size:12px; } #sph-prompt-dialog .sph-prompt-head-actions { flex-wrap:wrap; } #sph-prompt-dialog .sph-prompt-mode { font-size:14px; } #sph-prompt-dialog #sph-prompt { height:clamp(100px,45dvh,560px); min-height:100px; max-height:none; font-size:14px; line-height:1.7; } #sph-prompt-dialog .sph-promptrow { height:auto; flex-wrap:wrap; padding:10px; gap:8px; } #sph-prompt-dialog .sph-prompt-actions { flex-wrap:wrap; margin:0; } #sph-prompt-dialog .sph-pb { min-height:32px; font-size:12px; } #sphere-view[data-sphere-shell] > .sph-timeline { position:absolute; inset:auto 0 0; transform:none; width:100%; box-sizing:border-box; display:grid; grid-template-columns:232px minmax(0,1fr); grid-template-rows:48px minmax(0,1fr); gap:0; padding:0; z-index:80; background:var(--u-panel); border:0; border-top:1px solid var(--u-border); border-radius:0; box-shadow:none; color:var(--u-text); } #sphere-view[data-sphere-shell] > .sph-timeline[hidden] { display:none; } #sphere-view[data-sphere-shell] .sph-shell-timeline-nav { grid-column:1; grid-row:1 / -1; display:flex; flex-direction:column; min-height:0; gap:10px; padding:14px 12px; border-right:1px solid var(--u-border); overflow:auto; } #sphere-view[data-sphere-shell] .sph-shell-timeline-nav strong { font-size:14px; font-weight:500; } #sphere-view[data-sphere-shell] .sph-shell-timeline-title { font-size:12px; color:var(--u-label); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #sphere-view[data-sphere-shell] .sph-shell-timeline-nav small { font-size:12px; color:var(--u-label); margin-top:auto; } #sphere-view[data-sphere-shell] .sph-shell-timeline-nav .sph-tl-scope { height:auto; display:flex; flex-direction:column; align-items:stretch; gap:4px; padding:0; margin:6px 0; border:0; background:none; } #sphere-view[data-sphere-shell] .sph-shell-timeline-nav .sph-tl-scope button { display:flex; align-items:center; gap:8px; min-height:34px; padding:6px 10px; border:0; border-radius:6px; background:none; color:var(--u-label); font-size:14px; font-family:inherit; text-align:left; cursor:pointer; } #sphere-view[data-sphere-shell] .sph-shell-timeline-nav .sph-tl-scope button.is-on { background:var(--u-sel); color:var(--u-text); } #sphere-view[data-sphere-shell] .sph-tl-panelhead { grid-column:2; grid-row:1; height:auto; padding:8px 12px; gap:6px; min-width:0; overflow-x:auto; scrollbar-width:thin; background:var(--u-panel); border-color:var(--u-border); } #sphere-view[data-sphere-shell] .sph-tl-panelhead button { width:32px; height:30px; flex-shrink:0; border-radius:6px; background:var(--u-input); color:var(--u-text); font-size:14px; } #sphere-view[data-sphere-shell] .sph-tl-panelhead button:hover { background:var(--u-hover); } #sphere-view[data-sphere-shell] .sph-tl-panelhead button.is-on { background:var(--u-sel); } #sphere-view[data-sphere-shell] .sph-tl-panelhead .sph-tl-scope { flex:0 0 auto; width:max-content; height:auto; } #sphere-view[data-sphere-shell] .sph-tl-panelhead .sph-tl-scope button { flex:0 0 auto; width:auto; min-width:max-content; height:30px; padding:0 10px; white-space:nowrap; } #sphere-view[data-sphere-shell] .sph-tl-panelhead [data-sph-tl-autokey] { width:auto; min-width:64px; padding-inline:8px; } #sphere-view[data-sphere-shell] .sph-tl-panelhead [data-sph-tl-play] { width:64px; } #sphere-view[data-sphere-shell] .sph-tl-panelhead [data-sph-tl-close] { position:sticky; right:0; margin-left:auto; box-shadow:-6px 0 4px var(--u-panel); } #sphere-view[data-sphere-shell] .sph-tl-panelhead time { font-size:12px; font-weight:500; min-width:90px; color:#ededed; } #sphere-view[data-sphere-shell] .sph-tl-zoomlab { flex-shrink:0; width:64px; font-size:12px; color:var(--u-label); } #sphere-view[data-sphere-shell] :is(.sph-tl-work,.sph-film-timeline-wrap) { grid-column:2; grid-row:2; min-width:0; background:var(--u-panel); } #sphere-view[data-sphere-shell] :is(.sph-tl-labels,.sph-film-timeline-wrap>aside) { width:clamp(120px,15vw,288px); background:var(--u-panel); border-color:var(--u-border); } #sphere-view[data-sphere-shell] .sph-tl-labels { overflow:clip; display:block; } #sphere-view[data-sphere-shell] .sph-tl-labels>span { display:block; height:24px; box-sizing:border-box; } #sphere-view[data-sphere-shell] .sph-tl-labels>b { height:34px; box-sizing:border-box; } #sphere-view[data-sphere-shell] .sph-tl-labels>* { transform:translateY(var(--sph-track-scroll-y,0px)); } #sphere-view[data-sphere-shell] .sph-tl-labels>b { padding:0 16px; gap:16px; font-weight:400; font-size:12px; color:var(--u-label); border-color:var(--u-border); } #sphere-view[data-sphere-shell] .sph-tl-labels>b em { color:var(--u-text); font-size:12px; } #sphere-view[data-sphere-shell] #sph-tl-objecttracks { position:relative; } #sphere-view[data-sphere-shell] :is(.sph-tl-object-header,.sph-tl-object-label,.sph-tl-property-label,.sph-tl-property-row) { height:34px; box-sizing:border-box; border-bottom:1px solid var(--u-panel); } #sphere-view[data-sphere-shell] .sph-tl-object-header { background:#282828; } #sphere-view[data-sphere-shell] .sph-tl-property-row { position:relative; background:#242424; } #sphere-view[data-sphere-shell] .sph-tl-object-label { display:flex; align-items:center; padding-inline:8px; background:#282828; } #sphere-view[data-sphere-shell] .sph-tl-object-label button { display:flex; align-items:center; gap:8px; height:28px; border:0; padding:0 6px; border-radius:5px; background:transparent; color:#ededed; font:400 12px/1.4 Inter,Pretendard,sans-serif; cursor:pointer; } #sphere-view[data-sphere-shell] .sph-tl-object-label [data-sph-tl-fold] { width:28px; flex-shrink:0; justify-content:center; } #sphere-view[data-sphere-shell] .sph-tl-object-label [data-sph-tl-object] { flex:1; min-width:0; } #sphere-view[data-sphere-shell] .sph-tl-object-label [aria-pressed="true"] { background:#4a4a4a; } #sphere-view[data-sphere-shell] .sph-tl-object-label button:hover { background:#353535; } #sphere-view[data-sphere-shell] .sph-tl-object-label span { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } #sphere-view[data-sphere-shell] .sph-tl-property-label { display:flex; align-items:center; padding:0 16px 0 48px; color:#a7a7a7; font:400 12px/1.4 Inter,Pretendard,sans-serif; } #sphere-view[data-sphere-shell] .sph-tl-property-row :is(.sph-tl-perf,.sph-tl-anim) { top:4px; height:26px; border:0; border-radius:5px; box-shadow:none; background:#3b3b3b; color:#ededed; } #sphere-view[data-sphere-shell] .sph-tl-property-row :is(.sph-tl-perf,.sph-tl-anim) span { font:400 12px/24px Inter,Pretendard,sans-serif; } #sphere-view[data-sphere-shell] .sph-tl-property-row .sph-tl-perf span { display:block; padding:0 6px; color:inherit; font-size:12px!important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #sphere-view[data-sphere-shell] .sph-tl-property-row .sph-tl-anim.is-on { background:#555; color:#fff; } #sphere-view[data-sphere-shell] .sph-tl-property-row .sph-tl-key { top:11px; width:12px; height:12px; border:1px solid #a7a7a7; background:#4a4a4a; box-shadow:none; } #sphere-view[data-sphere-shell] .sph-tl-property-row .sph-tl-key.is-on { background:#dedede; border-color:#dedede; } #sphere-view[data-sphere-shell] :is(.sph-tl-scroll,.sph-tl-ruler,.sph-film-timeline-scroll) { background:var(--u-panel); } #sphere-view[data-sphere-shell] :is(.sph-tl-track,.sph-tl-perftrack,.sph-tl-animtrack,.sph-tl-keytrack,.sph-tl-camtrack,.sph-tl-subtrack) { background:#242424; border-color:var(--u-panel); } #sphere-view[data-sphere-shell] .sph-tl-block { background:#303030; border-color:#434343; color:var(--u-text); } #sphere-view[data-sphere-shell] .sph-tl-block.is-on { background:#4a4a4a; border-color:transparent; color:#fff; } #sphere-view[data-sphere-shell] .sph-tl-block:is(.is-on,:not(.is-on)) em { color:#c2c2c2; } #sphere-view[data-sphere-shell] :is(.sph-tl-block span,.sph-tl-block em,.sph-tl-empty,.sph-tl-perfhint,.sph-tl-animhint,.sph-tl-keyhint,.sph-tl-camhint,.sph-tl-subhint,.sph-tl-film-summary) { font-size:12px; font-weight:400; } #sphere-view[data-sphere-shell] .sph-tl-ruler>i em { color:#aaa; } #sphere-view[data-sphere-shell] .sph-tl-head { background:#dedede; box-shadow:none; } #sphere-view[data-sphere-shell] .sph-tl-head::before { content:attr(data-time-label); top:0; left:0; transform:translateX(-1px); min-width:42px; height:24px; box-sizing:border-box; padding:3px 6px; border:0; border-radius:5px; background:#dedede; color:#242424; font:500 12px/18px Inter,Pretendard,sans-serif; font-style:normal; text-align:center; } #sphere-view[data-sphere-shell] .sph-tl-block { top:3px; height:28px; border:0; border-radius:5px; box-shadow:none; } #sphere-view[data-sphere-shell] :is(.sph-tl-perfhint,.sph-tl-animhint,.sph-tl-keyhint,.sph-tl-camhint,.sph-tl-subhint) { color:#a3a3a3; opacity:1; font-size:12px; } #sphere-view[data-sphere-shell] .sph-tl-ruler :is(em,b) { font-size:12px; font-weight:400; color:#aaa; } #sphere-view[data-sphere-shell] .sph-tl-ruler>b { display:none; } #sphere-view[data-sphere-shell] .sph-tl-resizer { top:-3px; height:6px; touch-action:none; } #sphere-view[data-sphere-shell] .sph-tl-resizer:focus-visible { outline:2px solid #c4c4c4; outline-offset:-2px; } #sphere-view[data-sphere-shell] .sph-tl-resizer:is(:hover,:active)::after { content:none; } body.sph-playing #sphere-view[data-sphere-shell] > .sph-timeline { opacity:1; pointer-events:auto; } #sphere-view[data-sphere-shell][data-sphere-compact="true"] > .sph-timeline { grid-template-columns:minmax(0,1fr); grid-template-rows:40px 48px minmax(0,1fr); } #sphere-view[data-sphere-shell][data-sphere-compact="true"] .sph-shell-timeline-nav { grid-row:1; grid-column:1; flex-direction:row; align-items:center; overflow:hidden; border-right:0; padding:4px 8px; } #sphere-view[data-sphere-shell][data-sphere-compact="true"] .sph-shell-timeline-nav :is(strong,.sph-shell-timeline-title,small) { display:none; } #sphere-view[data-sphere-shell][data-sphere-compact="true"] .sph-shell-timeline-nav .sph-tl-scope { flex-direction:row; margin:0; } #sphere-view[data-sphere-shell][data-sphere-compact="true"] .sph-shell-timeline-nav .sph-tl-scope button { min-height:30px; font-size:14px; } #sphere-view[data-sphere-shell][data-sphere-compact="true"] .sph-tl-panelhead { grid-column:1; grid-row:2; padding-inline:8px; } #sphere-view[data-sphere-shell][data-sphere-compact="true"] :is(.sph-tl-work,.sph-film-timeline-wrap) { grid-column:1; grid-row:3; } #sphere-view[data-sphere-shell][data-sphere-compact="true"] :is(.sph-tl-labels,.sph-film-timeline-wrap>aside) { width:112px; } #sphere-view[data-sphere-shell][data-sphere-compact="true"] .sph-tl-object-label { padding-inline:2px; } #sphere-view[data-sphere-shell][data-sphere-compact="true"] .sph-tl-object-label [data-sph-tl-object]>i { display:none; } #sphere-view[data-sphere-shell][data-sphere-compact="true"] .sph-tl-property-label { padding-left:36px; } #sphere-view[data-sphere-shell][data-sphere-compact="true"] .sph-tl-labels>b { padding-inline:8px; gap:8px; } #sphere-view[data-sphere-shell][data-sphere-compact="true"] #sph-pip { width:136px; height:auto; max-height:110px; } #sphere-view[data-sphere-shell] .sph-shell-backdrop[hidden] { display:none; } /* Standalone sharing is a centered modal, never a corner popover over the scene. */ #sphere-view[data-sphere-shell] #sph-share { display:none!important; } #sphere-view[data-sphere-shell] #sph-collab-fab.sph-shell-collab-trigger { position:relative; inset:auto; z-index:auto; display:flex; flex-shrink:0; align-items:center; gap:6px; width:auto; min-width:32px; height:30px; margin:0; padding:0 8px; border:0; border-radius:6px; background:var(--u-input); color:#ededed; box-shadow:none; } #sphere-view[data-sphere-shell] .sph-shell-collab-label { font:400 14px/1.4 Inter,Pretendard,sans-serif; } #sphere-view[data-sphere-shell] #sph-collab-fab #sph-collab-badge { position:static; min-width:16px; height:16px; padding:0 4px; border:0; font:500 12px/16px Inter,Pretendard,sans-serif; } #sphere-view[data-sphere-shell] #sph-collab-badge[hidden] { display:none; } #sphere-view[data-sphere-shell][data-sphere-compact="true"] .sph-shell-collab-label { display:none; } #sphere-view[data-sphere-shell] #sph-collab-panel { position:fixed; inset:0; margin:auto; width:min(520px,calc(100vw - 24px)); max-width:calc(100vw - 24px); height:fit-content; max-height:calc(100dvh - 24px); padding:0; border:1px solid #353535; border-radius:16px; background:#1e1e1e; color:#ededed; box-shadow:0 16px 48px #0004; animation:none; } #sphere-view[data-sphere-shell] #sph-collab-panel:not([open]) { display:none; } #sphere-view[data-sphere-shell] #sph-collab-panel::backdrop { background:rgb(0 0 0 / .4); } #sphere-view[data-sphere-shell] #sph-collab-panel :is(.sph-collab-head,.sph-collab-tabs,.sph-collab-body,.sph-collab-sec) { background:#1e1e1e; border-color:#303030; } #sphere-view[data-sphere-shell] #sph-collab-panel :is(input,select,button) { min-height:32px; font-size:14px; } #sphere-view[data-sphere-shell] #sph-collab-panel :is(input,select,.sph-collab-btn) { background:#272727; border:1px solid transparent; border-radius:6px; color:#ededed; } #sphere-view[data-sphere-shell] #sph-collab-panel :is(p,small,.sph-collab-hint,.sph-collab-email,.sph-collab-presence,.sph-collab-sechead,.sph-collab-role) { font-size:12px; line-height:1.6; color:#b5b5b5; } #sphere-view[data-sphere-shell] #sph-collab-panel .sph-collab-title { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:500; } #sphere-view[data-sphere-shell] #sph-collab-panel .sph-collab-head { flex-shrink:0; padding:12px 16px 8px; border:0; } #sphere-view[data-sphere-shell] #sph-collab-panel .sph-collab-headtop { gap:8px; } #sphere-view[data-sphere-shell] #sph-collab-panel .sph-collab-tabs { flex-shrink:0; margin:0 16px; padding:0 0 8px; gap:4px; border-bottom:1px solid #353535; } #sphere-view[data-sphere-shell] #sph-collab-panel .sph-collab-tab { flex:1; justify-content:center; height:32px; padding:0 6px; border-radius:6px; font-weight:400; } #sphere-view[data-sphere-shell] #sph-collab-panel .sph-collab-tab.is-on { background:#272727; } #sphere-view[data-sphere-shell] #sph-collab-panel .sph-collab-body { min-height:0; overflow:auto; overscroll-behavior:contain; padding:16px; } #sphere-view[data-sphere-shell] #sph-collab-panel .sph-collab-sec { margin:0; } #sphere-view[data-sphere-shell] #sph-collab-panel .sph-collab-linksec { padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid #303030; } #sphere-view[data-sphere-shell] #sph-collab-panel .sph-collab-linkrow { display:grid; grid-template-columns:minmax(0,1fr) 94px; gap:8px; } #sphere-view[data-sphere-shell] #sph-collab-link { min-width:0; width:100%; padding:0 8px; font-size:12px; text-overflow:ellipsis; } #sphere-view[data-sphere-shell] #sph-collab-panel .sph-collab-access { display:flex; align-items:center; gap:8px; min-height:36px; margin-top:12px; padding:0 10px; border-radius:6px; background:#272727; color:#b5b5b5; } #sphere-view[data-sphere-shell] #sph-collab-access { appearance:none; flex:1; width:0; padding:0; border:0; background:transparent; } #sphere-view[data-sphere-shell] #sph-collab-panel select { color-scheme:dark; } #sphere-view[data-sphere-shell] #sph-collab-panel .sph-collab-invite { display:flex; align-items:flex-start; gap:8px; margin:0; } #sphere-view[data-sphere-shell] #sph-collab-panel .sph-collab-invitefield { display:flex; flex:1; min-width:0; min-height:72px; flex-wrap:wrap; align-content:flex-start; padding:4px 8px; border-radius:6px; background:#272727; } #sphere-view[data-sphere-shell] #sph-collab-email { flex:1 1 120px; min-width:0; padding:0; background:transparent; border:0; } #sphere-view[data-sphere-shell] #sph-collab-panel .sph-collab-rolefield { display:flex; align-items:center; margin-left:auto; gap:4px; } #sphere-view[data-sphere-shell] #sph-collab-role { appearance:none; padding:0 4px; border:0; background:transparent; } #sphere-view[data-sphere-shell] #sph-collab-add { width:94px; flex-shrink:0; background:#484848; border:0; color:#ededed; } #sphere-view[data-sphere-shell] #sph-collab-panel .sph-collab-hint { margin:8px 0 0; } #sphere-view[data-sphere-shell] #sph-collab-panel .sph-collab-ownerline { display:flex; align-items:center; gap:8px; min-height:44px; margin:12px 0 4px; padding:0; font-size:14px; color:#ededed; } #sphere-view[data-sphere-shell] #sph-collab-panel .sph-collab-ownerline>span:first-of-type { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; } #sphere-view[data-sphere-shell] #sph-collab-panel .sph-collab-member { min-height:40px; gap:8px; } #sphere-view[data-sphere-shell] #sph-collab-panel .sph-collab-mail { min-width:0; font-size:14px; } #sphere-view[data-sphere-shell] #sph-collab-panel .sph-collab-role { flex-shrink:0; padding:2px 6px; border-radius:6px; background:#272727; } #sphere-view[data-sphere-shell] #sph-collab-panel .sph-collab-exp { font-size:12px; } #sphere-view[data-sphere-shell] #sph-collab-panel .sph-collab-empty { padding:12px 0; background:transparent; font-size:12px; } #sphere-view[data-sphere-shell] #sph-collab-panel .sph-collab-x { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:32px; min-height:32px; opacity:1; } #sphere-view[data-sphere-shell] #sph-collab-panel .sph-collab-footer { flex-shrink:0; border-top:1px solid #303030; padding:10px 16px 12px; } #sphere-view[data-sphere-shell] #sph-collab-panel .sph-collab-headbot { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0; } #sphere-view[data-sphere-shell] #sph-collab-panel :is(.sph-collab-pcount,.sph-collab-badge) { font-size:12px; } #sphere-view[data-sphere-shell] #sph-collab-panel :is(input,select,button):focus { border-color:transparent; box-shadow:none; outline:none; } #sphere-view[data-sphere-shell] #sph-collab-panel :is(input,select,button):focus-visible { outline:1px solid #c4c4c4; outline-offset:2px; } #sphere-view[data-sphere-shell] #sph-collab-panel :disabled { opacity:.55; cursor:default; } #sphere-view[data-sphere-shell] #sph-collab-feedback[hidden] { display:none; } #sphere-view[data-sphere-shell] #sph-collab-panel :is(input,select,button,.sph-collab-mail,.sph-collab-ownerline,.sph-collab-hint) { font-weight:400; } #sphere-view[data-sphere-shell] .sph-shell-backdrop { position:absolute; inset:55px 0 0; z-index:99; background:#0007; border:0; border-radius:0; } #sphere-view[data-sphere-shell][data-sphere-compact="true"] .sphu-toolbar { display:flex; flex-wrap:wrap; align-content:center; height:96px; gap:0; } #sphere-view[data-sphere-shell][data-sphere-compact="true"] .sph-shell-project { height:44px; flex:1; border:0; padding:0 8px; } #sphere-view[data-sphere-shell][data-sphere-compact="true"] .sph-shell-inspector { height:44px; width:38px; padding:0 4px; border:0; } #sphere-view[data-sphere-shell][data-sphere-compact="true"] .sph-shell-heading-label { display:none; } #sphere-view[data-sphere-shell][data-sphere-compact="true"] .sph-shell-center { order:3; height:44px; width:100%; padding:0 8px; gap:8px; overflow-x:auto; scrollbar-width:thin; } #sphere-view[data-sphere-shell][data-sphere-compact="true"] .sph-shell-tools { gap:4px; } #sphere-view[data-sphere-shell][data-sphere-compact="true"] .sphu-main { top:96px; } #sphere-view[data-sphere-shell][data-sphere-compact="true"] .sphu-viewport { margin:0 8px 8px; } #sphere-view[data-sphere-shell][data-sphere-compact="true"] :is(.sphu-split,.sph-dockgrip,.sph-float-x,.sph-float-rs,.sph-merge-tabs,.sph-stack-split) { display:none; } #sphere-view[data-sphere-shell][data-sphere-compact="true"] :is(.sph-dock-col,.sph-dock-merge) { display:contents; } #sphere-view[data-sphere-shell][data-sphere-compact="true"] .sphu-panel { display:none !important; } #sphere-view[data-sphere-shell][data-sphere-compact="true"][data-sphere-drawer="left"] .sphu-left, #sphere-view[data-sphere-shell][data-sphere-compact="true"][data-sphere-drawer="right"] .sphu-right { display:flex !important; position:fixed !important; top:96px !important; bottom:8px !important; left:8px !important; right:auto !important; width:calc(100% - 16px) !important; max-width:373px; height:auto !important; min-height:0; flex:none !important; z-index:110 !important; border:1px solid #424242; border-radius:10px; box-shadow:0 10px 40px #0008; } #sphere-view[data-sphere-shell][data-sphere-compact="true"][data-sphere-drawer="right"] .sphu-right { left:auto !important; right:8px !important; } #sphere-view[data-sphere-shell][data-sphere-compact="true"] .sph-shell-backdrop { top:96px; } #sphere-view[data-sphere-shell][data-sphere-compact="true"] .sph-shell-action-label { display:none; } #sphere-view[data-sphere-shell][data-sphere-compact="true"] .sph-shell-view-modes .sph-shell-action-label { display:inline; } #sphere-view[data-sphere-shell].is-viewer :is(.sphu-panel,.sph-shell-tools,.sph-shell-inspector,#sph-shell-left) { display:none !important; } #sphere-view[data-sphere-shell].is-viewer .sphu-toolbar { display:flex; } #sphere-view[data-sphere-shell].is-viewer .sph-shell-center { margin-left:auto; } #sphere-view[data-sphere-shell].is-viewer .sphu-viewport { margin:0; border-radius:0; } @media (prefers-reduced-motion:reduce) { #sphere-view[data-sphere-shell] :is(.sphu-panel,.sphu-viewport,.sphu-toolbar) { transition:none; } } /* Short windows must scroll the controls and rows as one region. Otherwise the fixed layer controls consume the entire drawer and shrink the tree to zero. */ @media (max-height:540px) { #sphere-view[data-sphere-shell] #sph-left-layers { overflow-y:auto; } #sphere-view[data-sphere-shell] #sph-left-layers > * { flex-shrink:0; } #sphere-view[data-sphere-shell] #sph-left-layers > .sphu-tree { flex:0 0 auto; overflow:visible; } } #sphere-view[data-sphere-shell] #sph-ctx { max-height:calc(100dvh - 16px); overflow-y:auto; } /* Shared select popup: bounded in CSS pixels, inside the viewport/top layer. Existing native select owns the value and the engine's change/undo handlers. */ #sphere-view[data-sphere-shell] select:not([multiple]) { appearance:none; color-scheme:dark; min-height:32px; min-width:0; padding:0 28px 0 10px; border:1px solid transparent; border-radius:6px; background-color:#272727; background-image:url('/assets/sphere/figma/chevron.svg'); background-size:12px 12px; background-position:right 9px center; background-repeat:no-repeat; color:#dedede; font:400 14px/1.5 Inter,Pretendard,sans-serif; text-overflow:ellipsis; cursor:pointer; } #sphere-view[data-sphere-shell] select:not([multiple]):hover { background-color:#303030; } #sphere-view[data-sphere-shell] select:not([multiple]):focus-visible { outline:1px solid #c4c4c4; outline-offset:-1px; box-shadow:none; } #sphere-view[data-sphere-shell] .sph-select-menu { position:fixed; inset:auto; margin:0; padding:4px; box-sizing:border-box; max-height:288px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#5b5b5b #242424; border:1px solid #424242; border-radius:9px; background:#242424; color:#ededed; box-shadow:0 8px 28px #0004; font:400 14px/1.5 Inter,Pretendard,sans-serif; } #sphere-view[data-sphere-shell] .sph-select-option { position:relative; min-height:34px; box-sizing:border-box; display:flex; align-items:center; padding:6px 10px 6px 28px; border:0; border-radius:5px; white-space:normal; overflow-wrap:anywhere; font:400 14px/1.5 Inter,Pretendard,sans-serif; cursor:pointer; } #sphere-view[data-sphere-shell] .sph-select-option.is-current::before { content:'✓'; position:absolute; left:9px; color:#aaa; font-size:12px; } #sphere-view[data-sphere-shell] .sph-select-option.is-active { background:#484848; color:#fff; } #sphere-view[data-sphere-shell] .sph-select-option[aria-disabled="true"] { color:#888; cursor:default; } #sphere-view[data-sphere-shell] .sph-select-group { padding:8px 10px 4px; color:#aaa; font-size:12px; } #sphere-view[data-sphere-shell] :is(.sphu-menu,.sph-shell-menu-panel) { max-height:min(288px,calc(100dvh - 24px)); overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; background:#242424; border:1px solid #424242; border-radius:9px; } #sphere-view[data-sphere-shell] :is(.sphu-mi,.sph-shell-menu-item) { min-height:34px; font-size:14px; font-weight:400; } #sphere-view[data-sphere-shell] :is(.sphu-comph,.sph-sect) { min-height:44px; gap:8px; border-radius:0; border-bottom:1px solid #303030; background:transparent; color:#ccc; font:400 14px/1.5 Inter,Pretendard,sans-serif; letter-spacing:0; } #sphere-view[data-sphere-shell] .sph-sect { margin:8px 0 0; padding:0 2px; } #sphere-view[data-sphere-shell] .sph-sect i { order:2; margin-left:auto; font-size:14px; color:#999; } #sphere-view[data-sphere-shell] .sphu-right .sphu-comph>b { font-size:14px; } #sphere-view[data-sphere-shell] :is(.sphu-comph,.sph-sect):hover { background:transparent; } #sphere-view[data-sphere-shell] .sph-outl-row:not(.is-sel):not(.is-group-scope):hover { background:transparent; color:#999; } #sphere-view[data-sphere-shell] .sph-outl-row.is-sel:hover { background:var(--u-sel); color:var(--u-text); } #sphere-view[data-sphere-shell] .sph-outl-row.is-group-scope:hover { background:var(--sphere-semantic-color-selection-scope); color:#999; } #sphere-view[data-sphere-shell] .sph-outl-row .sph-outl-act { opacity:1; transition:none; } #sphere-view[data-sphere-shell] .sph-outl-row .sph-outl-act:hover { background:transparent; color:#737373; } #sphere-view[data-sphere-shell] .sph-outl-row.is-sel .sph-outl-act:hover { color:#fff; } #sphere-view[data-sphere-shell] :is(.sphu-comph,.sph-sect):focus-visible { outline:1px solid #c4c4c4; outline-offset:-1px; } #sphere-view[data-sphere-shell] .sph-cam-telemetry { margin:10px 0; padding:10px 12px; border:0; border-radius:8px; background:#272727; gap:10px; } #sphere-view[data-sphere-shell] .sph-cam-telemetry>div { grid-template-columns:minmax(0,1fr); gap:6px; } #sphere-view[data-sphere-shell] .sph-cam-telemetry span { color:#b5b5b5; font:400 14px/1.5 Inter,Pretendard,sans-serif; } #sphere-view[data-sphere-shell] .sph-cam-telemetry span b { color:#ededed; font:400 14px/1.5 Inter,Pretendard,sans-serif; font-variant-numeric:tabular-nums; } #sphere-view[data-sphere-shell] .sph-cam-telemetry>div>i { height:4px; background:#3a3a3a; } #sphere-view[data-sphere-shell] .sph-cam-telemetry>div>i em { background:#aaa; } #sphere-view[data-sphere-shell] .sph-cam-telemetry :is(span,b) { text-transform:none; letter-spacing:0; } #sphere-view[data-sphere-shell] .sph-shot-notes { display:flex; flex-direction:column; gap:6px; margin:12px 0; } #sphere-view[data-sphere-shell] .sph-shot-notes label { color:#ccc; font:400 14px/1.5 Inter,Pretendard,sans-serif; } #sphere-view[data-sphere-shell] .sph-shot-notes small { color:#aaa; font:400 12px/1.5 Inter,Pretendard,sans-serif; } #sphere-view[data-sphere-shell] .sphu-note { box-sizing:border-box; min-height:92px; padding:10px 12px; margin:0; background:#272727; border:1px solid transparent; border-radius:8px; color:#ededed; font:400 14px/1.65 Inter,Pretendard,sans-serif; } #sphere-view[data-sphere-shell] .sphu-note::placeholder { color:#999; } #sphere-view[data-sphere-shell] .sphu-note:focus-visible { outline:1px solid #c4c4c4; outline-offset:-1px; box-shadow:none; } #sphere-view[data-sphere-shell] .sphu-left-tabs { padding-inline:8px; gap:2px; } #sphere-view[data-sphere-shell] .sphu-lefttab { padding-inline:6px; } #sphere-view[data-sphere-shell] #sph-collab-panel .sph-collab-invitefield { min-height:48px; } #sphere-view[data-sphere-shell] #sph-collab-panel .sph-collab-access>i:last-child, #sphere-view[data-sphere-shell] #sph-collab-panel .sph-collab-rolefield>i { display:none; } @media (forced-colors:active) { #sphere-view[data-sphere-shell] .sph-select-menu { background:Canvas; color:CanvasText; border-color:CanvasText; } #sphere-view[data-sphere-shell] .sph-select-option.is-active { forced-color-adjust:none; background:CanvasText; color:Canvas; } } /* Figma 6106:2386: playback beside the ruler, navigation / object rows / time. Extra production tools remain original buttons in the left footer. Compact windows return them to the existing horizontally scrollable toolbar. */ #sphere-view[data-sphere-shell] .sph-shell-timeline-extra { display:contents; } #sphere-view[data-sphere-shell] .sph-tl-zoom-group { display:flex; align-items:center; gap:6px; flex-shrink:0; } #sphere-view[data-sphere-shell]:not([data-sphere-compact="true"]) .sph-shell-timeline-scene:not([data-sphere-timeline-dense="true"]) { --sph-timeline-label-width:268px; grid-template-rows:minmax(0,1fr); } #sphere-view[data-sphere-shell]:not([data-sphere-compact="true"]) .sph-shell-timeline-scene:not([data-sphere-timeline-dense="true"]) .sph-tl-work { grid-row:1; } #sphere-view[data-sphere-shell]:not([data-sphere-compact="true"]) .sph-shell-timeline-scene:not([data-sphere-timeline-dense="true"]) .sph-tl-labels { width:var(--sph-timeline-label-width); } #sphere-view[data-sphere-shell]:not([data-sphere-compact="true"]) .sph-shell-timeline-scene:not([data-sphere-timeline-dense="true"]) .sph-tl-panelhead { position:static; z-index:2; align-self:start; width:var(--sph-timeline-label-width); height:48px; box-sizing:border-box; padding:8px 12px; overflow:visible; border-right:1px solid #303030; border-bottom:0; } #sphere-view[data-sphere-shell]:not([data-sphere-compact="true"]) .sph-shell-timeline-scene:not([data-sphere-timeline-dense="true"]) :is(.sph-tl-ruler,.sph-tl-labels>span) { height:48px; } #sphere-view[data-sphere-shell]:not([data-sphere-compact="true"]) .sph-shell-timeline-scene:not([data-sphere-timeline-dense="true"]) .sph-shell-timeline-nav { grid-row:1; padding-bottom:172px; } #sphere-view[data-sphere-shell]:not([data-sphere-compact="true"]) .sph-shell-timeline-scene:not([data-sphere-timeline-dense="true"]) .sph-shell-timeline-extra { position:absolute; left:0; bottom:0; width:232px; box-sizing:border-box; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; gap:6px; padding:10px 12px; background:#1f1f1f; border-top:1px solid #303030; border-right:1px solid #303030; } #sphere-view[data-sphere-shell]:not([data-sphere-compact="true"]) .sph-shell-timeline-scene:not([data-sphere-timeline-dense="true"]) .sph-shell-timeline-extra time { grid-column:1 / 3; grid-row:1; min-width:0; margin:0; height:28px; display:flex; align-items:center; font-size:12px; } #sphere-view[data-sphere-shell]:not([data-sphere-compact="true"]) .sph-shell-timeline-scene:not([data-sphere-timeline-dense="true"]) .sph-shell-timeline-extra > button { grid-row:2; width:100%; height:32px; padding:0; display:grid; place-items:center; font-size:14px; } #sphere-view[data-sphere-shell]:not([data-sphere-compact="true"]) .sph-shell-timeline-scene:not([data-sphere-timeline-dense="true"]) .sph-shell-timeline-extra [data-sph-tl-close] { grid-column:3; grid-row:1; justify-self:end; position:static; width:28px; height:28px; margin:0; box-shadow:none; background:transparent; } #sphere-view[data-sphere-shell]:not([data-sphere-compact="true"]) .sph-shell-timeline-scene:not([data-sphere-timeline-dense="true"]) .sph-shell-timeline-extra .sph-tl-zoom-group { grid-column:1 / -1; grid-row:3; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; } #sphere-view[data-sphere-shell]:not([data-sphere-compact="true"]) .sph-shell-timeline-scene:not([data-sphere-timeline-dense="true"]) .sph-shell-timeline-extra .sph-tl-zoomrange { grid-column:1 / -1; width:100%; margin:0; } #sphere-view[data-sphere-shell]:not([data-sphere-compact="true"]) .sph-shell-timeline-scene:not([data-sphere-timeline-dense="true"]) .sph-shell-timeline-extra .sph-tl-zoom-group button { width:100%; height:32px; padding:0; display:grid; place-items:center; } #sphere-view[data-sphere-shell]:not([data-sphere-compact="true"]) .sph-shell-timeline-scene:not([data-sphere-timeline-dense="true"]) .sph-shell-timeline-extra .sph-tl-zoomlab { width:auto; min-width:0; text-align:center; font:400 12px/1.4 Inter,Pretendard,sans-serif; white-space:nowrap; } #sphere-view[data-sphere-shell] .sph-tl-panelhead time { font-family:Inter,Pretendard,sans-serif; font-variant-numeric:tabular-nums; } #sphere-view[data-sphere-shell] .sph-tl-object-label button { font-size:14px; } #sphere-view[data-sphere-shell] .sph-tl-block.is-on { background:#484848; color:#ededed; } #sphere-view[data-sphere-shell] .sph-tl-head::before { transform:translateX(clamp(-50%,var(--sph-playhead-label-offset,0px),0px)); } /* Film workspace: a single track gutter, compact transport, and nested shot strips. Clip widths remain the real time scale; visual spacing is inset, never padding. */ #sphere-view[data-sphere-shell] > .sph-timeline.sph-shell-timeline-film { grid-template-columns:232px minmax(0,1fr); grid-template-rows:48px minmax(0,1fr); background:var(--u-panel); } #sphere-view[data-sphere-shell] .sph-shell-timeline-film .sph-tl-panelhead { grid-column:2; grid-row:1; background:var(--u-panel); border-bottom:1px solid var(--u-border); padding:7px 12px; gap:7px; } #sphere-view[data-sphere-shell] .sph-shell-timeline-film .sph-tl-film-summary { color:#aaa; margin-left:2px; } #sphere-view[data-sphere-shell] .sph-shell-timeline-film [data-sph-film-fit] { display:flex; align-items:center; gap:6px; width:auto; padding:0 10px; font-size:14px; white-space:nowrap; } #sphere-view[data-sphere-shell] .sph-shell-timeline-film .sph-film-timeline-wrap { grid-column:2; grid-row:2; } #sphere-view[data-sphere-shell] .sph-shell-timeline-film .sph-film-timeline-wrap > aside { box-sizing:border-box; width:160px; padding:0 14px; gap:0; border-right:1px solid var(--u-border); background:var(--u-panel); } #sphere-view[data-sphere-shell] .sph-shell-timeline-film .sph-film-timeline-wrap > aside b { height:32px; display:flex; align-items:center; font:400 12px/1 Inter,Pretendard,sans-serif; color:#999; } #sphere-view[data-sphere-shell] .sph-shell-timeline-film .sph-film-timeline-wrap > aside span { padding-top:20px; color:#dedede; font:500 14px/20px Inter,Pretendard,sans-serif; } #sphere-view[data-sphere-shell] .sph-shell-timeline-film .sph-film-timeline-wrap > aside em { padding-top:29px; color:#aaa; font-size:12px; } #sphere-view[data-sphere-shell] .sph-shell-timeline-film .sph-film-timeline-scroll { background:#1e1e1e; scrollbar-color:#555 #272727; } #sphere-view[data-sphere-shell] .sph-shell-timeline-film .sph-film-timeline { padding-top:0; min-height:152px; background:linear-gradient(#303030 1px,transparent 1px) 0 32px/100% 114px; } #sphere-view[data-sphere-shell] .sph-shell-timeline-film .sph-film-ruler { box-sizing:border-box; height:32px; border-bottom:1px solid #383838; background:#242424; } #sphere-view[data-sphere-shell] .sph-shell-timeline-film .sph-film-ruler > span { top:0; height:31px; padding:6px 6px 0; border-color:#404040; color:#b5b5b5; font:12px/16px Inter,Pretendard,sans-serif; font-variant-numeric:tabular-nums; } #sphere-view[data-sphere-shell] .sph-shell-timeline-film .sph-film-block { top:40px; height:96px; gap:0; border-radius:5px; background:#303030; box-shadow:inset -1px 0 #1e1e1e; transition:background .12s; } #sphere-view[data-sphere-shell] .sph-shell-timeline-film .sph-film-block:hover { transform:none; background:#383838; } #sphere-view[data-sphere-shell] .sph-shell-timeline-film .sph-film-block.is-on { background:#484848; box-shadow:inset 0 2px #aaa,inset -1px 0 #1e1e1e; } #sphere-view[data-sphere-shell] .sph-shell-timeline-film .sph-film-block:focus-visible { outline:1px solid #b5b5b5; outline-offset:-2px; } #sphere-view[data-sphere-shell] .sph-shell-timeline-film .sph-film-block > span { flex:none; height:32px; margin:0 8px; gap:6px; overflow:hidden; } #sphere-view[data-sphere-shell] .sph-shell-timeline-film .sph-film-block > span b { width:auto; min-width:18px; height:18px; padding:0 3px; border-radius:3px; background:#272727; color:#b5b5b5; font:400 10px/18px Inter,Pretendard,sans-serif; } #sphere-view[data-sphere-shell] .sph-shell-timeline-film .sph-film-block.is-on > span b { background:#dedede; color:#272727; } #sphere-view[data-sphere-shell] .sph-shell-timeline-film .sph-film-block > span strong { font:500 14px/20px Inter,Pretendard,sans-serif; color:#ededed; } #sphere-view[data-sphere-shell] .sph-shell-timeline-film .sph-film-block > em { height:22px; margin:0 9px; color:#b5b5b5; font:12px/18px Inter,Pretendard,sans-serif; } #sphere-view[data-sphere-shell] .sph-shell-timeline-film .sph-film-block > em span { color:#aaa; } #sphere-view[data-sphere-shell] .sph-shell-timeline-film .sph-film-shotmap { margin:7px 0 4px; height:26px; border-radius:3px; background:#242424; } #sphere-view[data-sphere-shell] .sph-shell-timeline-film .sph-film-shotmap i { top:0; bottom:0; border-radius:2px; background:#3b3b3b; box-shadow:inset 0 1px #505050; } #sphere-view[data-sphere-shell] .sph-shell-timeline-film .sph-film-shotmap i span { display:block; padding:3px 6px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#ccc; font:12px/20px Inter,Pretendard,sans-serif; } #sphere-view[data-sphere-shell] .sph-shell-timeline-film .sph-film-block.is-on .sph-film-shotmap i { background:#555; box-shadow:inset 0 1px #777; } #sphere-view[data-sphere-shell] .sph-shell-timeline-film .sph-tl-head { top:30px; background:#ddd; width:1px; } #sphere-view[data-sphere-shell] .sph-shell-timeline-film .sph-tl-head::before { top:-24px; min-width:0; height:22px; border-radius:3px; background:#ddd; color:#242424; font:500 12px/16px Inter,Pretendard,sans-serif; } @media(max-width:1099px) { #sphere-view[data-sphere-shell] .sph-shell-timeline-film .sph-film-timeline-wrap > aside { width:120px; } #sphere-view[data-sphere-shell] .sph-shell-timeline-film .sph-tl-film-summary { display:none; } } @media(max-width:640px) { #sphere-view[data-sphere-shell] > .sph-timeline.sph-shell-timeline-film { grid-template-columns:minmax(0,1fr); grid-template-rows:40px 48px minmax(0,1fr); } #sphere-view[data-sphere-shell] .sph-shell-timeline-film .sph-shell-timeline-nav { grid-column:1; grid-row:1; } #sphere-view[data-sphere-shell] .sph-shell-timeline-film .sph-tl-panelhead { grid-column:1; grid-row:2; } #sphere-view[data-sphere-shell] .sph-shell-timeline-film .sph-film-timeline-wrap { grid-row:3; } #sphere-view[data-sphere-shell] .sph-shell-timeline-film .sph-film-timeline-wrap > aside { width:82px; padding-inline:8px; } } /* Characters reuses the existing cast/model panel, including narrow docks. */ #sphere-view #sph-left-elements .sphu-left-foot { flex-wrap: wrap; } #sphere-view #sph-left-elements [data-sph-el-model-editor] select { max-width: 100%; } /* credit chip, top-right of the editor */ #sphere-view[data-sphere-shell] .sph-shell-credits { position:relative; display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px 0 8px; margin-right:6px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(255,255,255,.05); color:#e6e6e6; font:500 12px/16px Inter,Pretendard,sans-serif; cursor:pointer; white-space:nowrap; } #sphere-view[data-sphere-shell] .sph-shell-credits:hover { background:rgba(255,255,255,.09); } #sphere-view[data-sphere-shell] .sph-shell-credits-ico { color:#d6ff66; font-size:12px; } #sphere-view[data-sphere-shell] .sph-shell-credits[data-state="short"] { border-color:rgba(255,120,100,.45); color:#ffb4a8; } #sphere-view[data-sphere-shell] .sph-shell-credits[data-state="admin"] .sph-shell-credits-value { color:#bdbdbd; } #sphere-view[data-sphere-shell] .sph-shell-credits-delta { position:absolute; right:8px; top:-2px; color:#ffb4a8; font-weight:600; opacity:0; pointer-events:none; } #sphere-view[data-sphere-shell] .sph-shell-credits-delta.is-on { animation:sph-credit-delta 2.4s ease-out both; } @keyframes sph-credit-delta { 0%{opacity:0;transform:translateY(6px)} 15%{opacity:1;transform:translateY(-8px)} 70%{opacity:1;transform:translateY(-16px)} 100%{opacity:0;transform:translateY(-22px)} } #sphere-view[data-sphere-shell][data-sphere-compact="true"] .sph-shell-credits { display:none; } /* Characters and Assets live in the inspector now (director 2026-09-12): stacked like any section, lists scroll with the panel */ #sphere-view[data-sphere-shell] .sphu-right .sph-insp-moved { display:flex; flex-direction:column; gap:8px; min-height:0; background:transparent; } #sphere-view[data-sphere-shell] .sphu-right .sph-insp-moved .sphu-left-list { flex:0 0 auto; max-height:46vh; padding:0; overflow:auto; } #sphere-view[data-sphere-shell] .sphu-right .sph-insp-moved .sphu-left-filter { padding:0; } #sphere-view[data-sphere-shell] .sphu-right .sph-insp-moved .sphu-left-foot { display:flex; flex-wrap:wrap; gap:6px; padding:0; } #sphere-view[data-sphere-shell] .sphu-right .sph-assets-content { overflow:visible; } #sphere-view[data-sphere-shell] .sphu-right .sphu-comp[data-sph-insp="cast"] .sphu-compb, #sphere-view[data-sphere-shell] .sphu-right .sphu-comp[data-sph-insp="assets"] .sphu-compb { padding:0 0 12px; } /* 70번째 · 프리미어식 타임라인(감독 2026-09-17: 「프리미어 프로처럼 리디자인 · 프로그램으로 고도화 · 최적화」). 무채색 크롬 · 클립 종류는 왼쪽 띠 색으로만 구분. */ #sphere-view[data-sphere-shell] .sph-tl-content { background-image:linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); } #sphere-view[data-sphere-shell] .sph-tl-ruler { background:#1a1a1a; border-bottom:1px solid #3a3a3a; } #sphere-view[data-sphere-shell] .sph-tl-ruler>i { top:auto; bottom:0; height:12px; width:1px; background:#666; } #sphere-view[data-sphere-shell] .sph-tl-ruler>i em { top:auto; bottom:13px; left:4px; color:#bdbdbd; font:400 11px/14px Inter,Pretendard,sans-serif; letter-spacing:.2px; font-variant-numeric:tabular-nums; } #sphere-view[data-sphere-shell] .sph-tl-ruler>i.is-minor { height:5px; background:#4a4a4a; } #sphere-view[data-sphere-shell] .sph-tl-ruler>i.sph-tl-zero em { left:3px; } #sphere-view[data-sphere-shell] .sph-tl-scroll:focus-visible { outline:1px solid #7a7a7a; outline-offset:-1px; } #sphere-view[data-sphere-shell] .sph-tl-head { width:1px; background:#ededed; } #sphere-view[data-sphere-shell] .sph-tl-head::after { content:''; position:absolute; top:24px; left:-5px; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid #dedede; } #sphere-view[data-sphere-shell] .sph-tl-labels>b small { flex:none; min-width:22px; padding:1px 5px; border-radius:3px; background:#3a3a3a; color:#c4c4c4; font:500 11px/14px Inter,Pretendard,sans-serif; text-align:center; letter-spacing:.2px; } #sphere-view[data-sphere-shell] .sph-tl-labels>b { gap:8px; } #sphere-view[data-sphere-shell] .sph-tl-labels>b i { color:#8a8a8a; } #sphere-view[data-sphere-shell] :is(.sph-tl-track,.sph-tl-subtrack) { background:#272727; } #sphere-view[data-sphere-shell] .sph-tl-camtrack { background:#222; } #sphere-view[data-sphere-shell] :is(.sph-tl-block,.sph-tl-anim,.sph-tl-sub,.sph-tl-cam--rack,.sph-tl-property-row .sph-tl-perf) { border-left:3px solid #9a9a9a; border-radius:4px; box-sizing:border-box; } #sphere-view[data-sphere-shell] .sph-tl-block { padding-left:6px; border-left-color:#b5b5b5; } #sphere-view[data-sphere-shell] .sph-tl-block.is-on { border-left-color:#fff; box-shadow:inset 0 0 0 1px #6a6a6a; } #sphere-view[data-sphere-shell] .sph-tl-block span { font-weight:500; } #sphere-view[data-sphere-shell] .sph-tl-property-row .sph-tl-anim { border-left-color:#6fa8a0; } #sphere-view[data-sphere-shell] .sph-tl-property-row .sph-tl-perf { border-left-color:#8c8c8c; } #sphere-view[data-sphere-shell] .sph-tl-property-row .sph-tl-perf--path { background:repeating-linear-gradient(135deg,#454545 0 5px,#3b3b3b 5px 9px); } #sphere-view[data-sphere-shell] .sph-tl-sub { border-left-color:#7c9e6a; } #sphere-view[data-sphere-shell] .sph-tl-cam--rack { border-left-color:#b09a5d; } #sphere-view[data-sphere-shell] .sph-tl-cam--lens { border-left:3px solid #b09a5d; } #sphere-view[data-sphere-shell] .sph-tl-trim, #sphere-view[data-sphere-shell] .sph-tl-subtrim, #sphere-view[data-sphere-shell] .sph-tl-anim>[data-sph-animtrim] { border-radius:0 4px 4px 0; } #sphere-view[data-sphere-shell] .sph-tl-block:hover .sph-tl-trim, #sphere-view[data-sphere-shell] .sph-tl-sub:hover .sph-tl-subtrim { background:rgba(255,255,255,.22); } #sphere-view[data-sphere-shell] .sph-tl-block:hover .sph-tl-trim::before, #sphere-view[data-sphere-shell] .sph-tl-sub:hover .sph-tl-subtrim::before { content:''; position:absolute; left:3px; top:8px; bottom:8px; width:2px; border-radius:1px; background:#fff; opacity:.8; } #sphere-view[data-sphere-shell] .sph-tl-zoomrange { appearance:none; -webkit-appearance:none; height:20px; background:transparent; cursor:pointer; } #sphere-view[data-sphere-shell] .sph-tl-zoomrange::-webkit-slider-runnable-track { height:2px; border-radius:2px; background:#4a4a4a; } #sphere-view[data-sphere-shell] .sph-tl-zoomrange::-webkit-slider-thumb { -webkit-appearance:none; width:12px; height:12px; margin-top:-5px; border-radius:50%; background:#dedede; border:0; } #sphere-view[data-sphere-shell] .sph-tl-zoomrange::-moz-range-track { height:2px; border-radius:2px; background:#4a4a4a; } #sphere-view[data-sphere-shell] .sph-tl-zoomrange::-moz-range-thumb { width:12px; height:12px; border-radius:50%; background:#dedede; border:0; } #sphere-view[data-sphere-shell] .sph-tl-zoomrange:focus-visible { outline:1px solid #8a8a8a; outline-offset:2px; } #sphere-view[data-sphere-shell] .sph-tl-panelhead .sph-tl-zoomrange { width:88px; flex:0 0 auto; } #sphere-view[data-sphere-shell] .sph-tl-snapline { background:#dedede; }