/* Neutral components inside the shared KellyOS window. */
.work-experiments {
    --exp-stage:#f8f8f8;
    --exp-surface:#fff;
    --exp-ink:#292929;
    --exp-muted:#767676;
    --exp-line:#dedede;
    --exp-accent:#484848;
    --exp-soft:#ededed;
    --exp-ease:cubic-bezier(.2,.7,.3,1);
    color:var(--exp-ink);
}
.work-detail.work-experiments{padding:0}
.experiments-content{padding:36px clamp(24px,6cqw,96px) 32px;overscroll-behavior:contain;font:12px/16px var(--font)}
.experiments-content *{box-shadow:none;text-shadow:none}
.experiments-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:900px;margin:0 auto}
.exp-card{min-width:0}
.exp-stage{height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:24px 18px;border-radius:6px;background:var(--exp-stage)}
.exp-stage button{display:inline-flex;align-items:center;cursor:pointer;font:inherit;line-height:16px;-webkit-tap-highlight-color:transparent}
.exp-stage svg{display:block;flex-shrink:0;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* Center whole-pixel line boxes, then compensate for the font's high visual baseline. */
.exp-control-label{display:block;line-height:16px;transform:translateY(1px)}
.exp-stage strong{font-size:12px;font-weight:500}
.exp-stage-note{position:absolute;bottom:12px;left:12px;right:12px;margin:0;color:var(--exp-muted);font-size:11px;text-align:center}
.exp-button,.exp-save,.exp-like{display:flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:8px 14px;border:1px solid var(--exp-line);border-radius:6px;background:var(--exp-surface);color:var(--exp-ink);transition:background-color 160ms ease,border-color 160ms ease,color 160ms ease}
.exp-button:hover,.exp-like:hover{background:var(--exp-soft)}
.exp-button:active,.exp-like:active{border-color:var(--exp-muted)}

/* Save: a quiet progress indicator followed by a check. */
.exp-save-actions{display:flex;align-items:center;justify-content:center;gap:8px;max-width:100%}
.exp-save{flex:0 0 auto;width:auto;overflow:hidden;background:#353535;border-color:#353535;color:#fff}
.exp-save-content{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;gap:8px;white-space:nowrap}
.exp-save-label{position:relative;perspective:160px}
.exp-label-face{display:block;line-height:16px;backface-visibility:hidden;transform-origin:50% 50%}
.exp-label-outgoing{position:absolute;top:0;left:0;width:max-content;pointer-events:none}
.exp-cancel{flex:0 0 auto;transition:opacity 160ms ease,background-color 160ms ease}
.exp-cancel:hover:not(:disabled){background:#f6f6f6}
.exp-cancel:disabled{opacity:.4;cursor:default;background:var(--exp-surface);border-color:var(--exp-line)}
.exp-save[aria-disabled=true]{cursor:default}
.exp-save:hover{background:#272727;border-color:#272727}
.exp-save:active{background:#1f1f1f}
.exp-save.is-saved{background:#16834b;border-color:#16834b;color:#fff;transition:background-color 240ms ease,border-color 240ms ease,color 160ms ease}
.exp-save-icon{display:none;place-items:center;flex:0 0 16px;width:16px;height:16px}
.exp-save-icon svg{width:16px;height:16px}
.exp-save:is(.is-saving,.is-saved) .exp-save-icon{display:grid}
.exp-save.is-saving .exp-save-icon{border:1.5px solid #ffffff50;border-top-color:#fff;border-radius:50%;animation:exp-spin 900ms linear infinite}
.exp-save.is-saved svg{transform-origin:50% 50%;animation:exp-check-pop 320ms cubic-bezier(.2,.7,.3,1) both}
html:not([data-theme="dark"]) .exp-save:not(.is-saved){background:#fff;border-color:#bcbcbc;color:var(--exp-ink)}
html:not([data-theme="dark"]) .exp-save:not(.is-saved):hover{background:#fafafa;border-color:#aaa}
html:not([data-theme="dark"]) .exp-save:not(.is-saved):active{background:#f3f3f3}
html:not([data-theme="dark"]) .exp-cancel{background:#f0f0f0}
html:not([data-theme="dark"]) .exp-cancel:hover:not(:disabled){background:#e7e7e7}
html:not([data-theme="dark"]) .exp-save.is-saving .exp-save-icon{border-color:rgba(0,0,0,.18);border-top-color:var(--exp-ink)}

/* Segmented control: only the selection moves. */
.exp-segment{display:flex;justify-content:space-between;width:max-content;max-width:100%;padding:3px;position:relative;border-radius:999px;background:var(--exp-soft)}
.exp-segment-pill{position:absolute;top:3px;bottom:3px;left:3px;width:var(--period-width,56px);border:1px solid var(--exp-line);border-radius:999px;background:var(--exp-surface);transform:translateX(var(--period-x,0px));transform-origin:center;pointer-events:none}
.exp-segment button{display:grid;z-index:1;flex:0 0 auto;justify-content:center;min-height:28px;border:0;border-radius:999px;padding:6px 16px;background:transparent;color:var(--exp-muted);transition:color 160ms ease}
.exp-segment button::after{content:attr(data-label);grid-area:1/1;visibility:hidden;font-weight:600;pointer-events:none}
.exp-segment button[aria-pressed=true]{color:var(--exp-ink)}
.exp-segment .exp-control-label{grid-area:1/1;position:relative;top:1px;font-weight:400;transform:none}
.exp-segment button[aria-pressed=true] .exp-control-label{font-weight:600}

/* Disclosure: content expands without overshoot. */
.exp-expand-card{flex-shrink:0;width:250px;max-width:100%;border:1px solid var(--exp-line);border-radius:6px;background:var(--exp-surface)}
.exp-expand-card>button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:12px;border:0;background:transparent;text-align:left}
.exp-expand-card>button>svg:last-child{width:14px;height:14px;transform:rotate(90deg);transition:transform 200ms var(--exp-ease)}
.exp-expand-card>button .exp-activity-preview{width:63px;height:18px;margin-left:auto;overflow:visible;pointer-events:none;opacity:1;transition:opacity 160ms ease}
.exp-preview-line{fill:none;stroke:var(--exp-ink);stroke-width:1;vector-effect:non-scaling-stroke}
.exp-preview-dot{fill:var(--exp-surface);stroke:var(--exp-ink);stroke-width:1;vector-effect:non-scaling-stroke}
.is-expanded .exp-expand-card>button .exp-activity-preview{opacity:0}
.exp-expand-details{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows 220ms var(--exp-ease),opacity 180ms ease}
.exp-expand-details>div{overflow:hidden;min-height:0}
.exp-activity{padding:0 12px 12px}
.exp-activity-summary{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;color:var(--exp-muted);font-size:11px;line-height:16px}
.exp-activity-legend{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px;color:var(--exp-muted);font-size:9px;line-height:14px;white-space:nowrap}
.exp-activity-legend>span{display:flex;align-items:center;gap:4px}
.exp-legend-bar{width:8px;height:8px;border-radius:2px;background:var(--exp-accent);opacity:.3}
.exp-legend-line{width:10px;height:0;border-top:1.75px solid var(--exp-ink)}
.exp-activity .exp-activity-chart{display:block;width:100%;height:100px;stroke:none;overflow:visible}
.exp-activity-guide{fill:none;stroke:var(--exp-line);stroke-width:1;pointer-events:none}
.exp-activity-hit{fill:transparent;stroke:none}
.exp-activity-point{cursor:default}
.exp-activity-bar{fill:var(--exp-accent);stroke:none;transform-box:fill-box;transform-origin:center bottom;transform:scaleY(.25);opacity:0;transition:transform 340ms var(--exp-ease),opacity 180ms ease}
.exp-activity-chart text{fill:var(--exp-muted);stroke:none;font:9px var(--font);text-anchor:middle}
.is-expanded .exp-activity-bar{transform:scaleY(1);opacity:.3;transition-delay:var(--bar-delay)}
.exp-activity-value{pointer-events:none;opacity:0;transform:translateY(2px);transition:opacity 120ms ease,transform 160ms var(--exp-ease)}
.exp-activity-value rect{fill:var(--exp-ink);stroke:none}
.exp-activity-value text{fill:var(--exp-surface);font-size:10px;font-weight:500;font-variant-numeric:tabular-nums}
.is-expanded .exp-activity-point:is(.is-peak,:hover) .exp-activity-value{opacity:1;transform:translateY(0)}
.exp-activity-sparkline{fill:none;stroke:var(--exp-ink);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;pointer-events:none;transition:stroke-dashoffset 480ms var(--exp-ease),opacity 180ms ease}
.is-expanded .exp-activity-sparkline{stroke-dashoffset:0;opacity:1;transition-delay:140ms}
.exp-activity-dot{fill:var(--exp-surface);stroke:var(--exp-ink);stroke-width:1.5;pointer-events:none;opacity:0;transition:opacity 180ms ease}
.is-expanded .exp-activity-dot{opacity:1;transition-delay:180ms}
.is-expanded .exp-expand-details{grid-template-rows:1fr;opacity:1}
.is-expanded .exp-expand-card>button>svg:last-child{transform:rotate(270deg)}
.is-chart-morphing .exp-expand-card{overflow:hidden}
.is-chart-morphing .exp-expand-details,.is-chart-morphing .exp-activity-bar{transition:none}
.is-chart-morphing .exp-activity-preview,.is-chart-morphing .exp-activity-sparkline,.is-chart-morphing .exp-activity-dot{visibility:hidden}
.is-chart-morphing .exp-activity-value{transition:none}
.exp-stage .exp-moving-spark{position:absolute;max-width:none;pointer-events:none;z-index:2;overflow:visible}
.exp-activity-sparkline,.exp-activity-dot{transition:none}
.is-expanded .exp-activity-sparkline{stroke-dashoffset:0}

/* Three independent actions share one button outline. */
.exp-split-wrap{position:relative}
.exp-split{display:flex;border:1px solid var(--exp-line);border-radius:7px;background:var(--exp-surface)}
.exp-split>button{justify-content:center;height:36px;padding:0 12px;border:0;background:transparent;color:var(--exp-ink);transition:background-color 160ms ease,color 160ms ease}
.exp-split>button+button{border-left:1px solid var(--exp-line)}
.exp-split>button:first-child{border-radius:6px 0 0 6px}
.exp-split>button:last-child{border-radius:0 6px 6px 0}
.exp-split>.exp-split-icon{position:relative;width:38px;padding:0}
.exp-icon-tooltip{position:absolute;z-index:4;bottom:calc(100% + 5px);padding:5px 8px;border:1px solid var(--exp-line);border-radius:6px;background:var(--exp-surface);color:var(--exp-ink);font-size:11px;font-weight:400;line-height:16px;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity 140ms ease,bottom 160ms var(--exp-ease),visibility 140ms}
.exp-split-icon:is(:hover,:focus-visible) .exp-icon-tooltip{opacity:1;visibility:visible;bottom:calc(100% + 8px);transition-delay:0s}
.exp-split-icon svg{width:16px;height:16px}
.exp-split>button:hover{background:var(--exp-soft)}
.exp-split>button:active{background:var(--exp-line)}
.exp-split>button:focus-visible{outline-offset:-3px}

.exp-tilt-zone{width:242px;max-width:100%;height:148px;touch-action:pan-y;border-radius:12px;cursor:pointer;user-select:none}
.exp-tilt-card{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:perspective(800px) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg));transition:transform 650ms cubic-bezier(.22,1,.36,1)}
.exp-tilt-flipper{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateY(var(--card-flip,0deg));transition:transform 550ms cubic-bezier(.4,0,.2,1)}
.exp-tilt-face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:18px;overflow:hidden;border:1px solid var(--exp-line);border-radius:12px;background:linear-gradient(135deg,var(--exp-soft),var(--exp-surface) 65%);color:var(--exp-ink);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.exp-tilt-back{align-items:center;justify-content:center;transform:rotateY(180deg)}
.experiments-content .exp-tilt-emboss{color:#e8e8e8;font-size:60px;font-weight:750;line-height:1;text-shadow:-1px -1px 1px rgba(255,255,255,.95),1px 1px 1px rgba(0,0,0,.18)}
html[data-theme="dark"] .exp-tilt-emboss{color:#353535;text-shadow:-1px -1px 1px rgba(255,255,255,.13),1px 1px 1px rgba(0,0,0,.48)}
.is-tilting .exp-tilt-card{transition-duration:180ms}
.exp-tilt-top,.exp-tilt-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
.exp-tilt-top{font-size:11px;color:var(--exp-muted)}
.exp-tilt-mark{font-size:21px;font-weight:700;line-height:1;color:var(--exp-ink)}
.exp-tilt-name{display:block;margin-bottom:5px;font-size:13px;font-weight:500}
.exp-tilt-meta{font-size:10px;color:var(--exp-muted)}
.exp-tilt-glare{position:absolute;inset:0;pointer-events:none;background:radial-gradient(180px circle at var(--card-light-x,50%) var(--card-light-y,50%),rgba(255,255,255,.3),transparent 75%);opacity:0;transition:opacity 240ms ease}
.is-tilting .exp-tilt-glare{opacity:.4}
@media(prefers-reduced-motion:reduce){.exp-tilt-card{transform:none}.exp-tilt-glare{display:none}}

/* Three quiet, spatial rhythms on concentric dot rings. */
.exp-loaders{display:flex;align-items:center;justify-content:center;gap:24px;width:100%;padding-bottom:2px}
.exp-loader-sample{position:relative;display:grid;place-items:center;min-width:48px}
.exp-loader-circle{position:relative;width:36px;height:36px;transform:scale(.85)}
.exp-loader-dot{position:absolute;width:2px;height:2px;margin:1px;border-radius:50%;background:var(--exp-ink);opacity:.16;transform:scale(.75);animation:exp-dot-pulse 1800ms ease-in-out infinite;animation-delay:var(--dot-delay)}
.exp-loader-dot--still{animation:none;opacity:.16}
.exp-loader-label{margin-top:17px;color:var(--exp-ink);font:inherit;line-height:16px;text-align:center;transform:translateY(1px)}
.exp-stage .exp-loader-toggle{position:absolute;inset:0;margin:auto;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:var(--exp-stage);color:var(--exp-ink);opacity:0;transition:opacity 140ms ease}
.exp-loader-toggle svg{width:16px;height:16px}
.exp-loader-sample--control:hover .exp-loader-toggle,.exp-loader-toggle:focus-visible{opacity:1}
.exp-loader-toggle:disabled{cursor:default}
.exp-loader-play-icon{display:none}
.is-loader-paused .exp-loader-pause-icon{display:none}
.is-loader-paused .exp-loader-play-icon{display:block}
.is-loader-paused .exp-loader-dot,.window--work.is-minimized .exp-loader-dot{animation-play-state:paused}
@keyframes exp-dot-pulse{0%,65%,100%{opacity:.16;transform:scale(.75)}20%{opacity:1;transform:scale(1)}40%{opacity:.45;transform:scale(.9)}}
@media(prefers-reduced-motion:reduce){.exp-loader-dot{opacity:.45;transform:none}.exp-loader-dot:nth-child(3n){opacity:.85}}

html[data-theme="dark"] .work-experiments{--exp-stage:#252525;--exp-surface:#303030;--exp-ink:#ededed;--exp-muted:#ababab;--exp-line:#484848;--exp-accent:#dedede;--exp-soft:#393939}
html[data-theme="dark"] .exp-save{border-color:#737373}
html[data-theme="dark"] .exp-cancel:hover:not(:disabled){background:#353535}
html[data-theme="dark"] .exp-save.is-saved{border-color:#16834b}
.work-experiments :focus-visible,html[data-theme="dark"] .work-experiments :focus-visible{outline-color:var(--exp-accent)}
@keyframes exp-spin{to{transform:rotate(360deg)}}
@keyframes exp-check-pop{
    0%{opacity:0;transform:scale(.55) rotate(-24deg)}
    65%{opacity:1;transform:scale(1.12) rotate(5deg)}
    100%{opacity:1;transform:scale(1) rotate(0deg)}
}
@container (max-width:620px){.experiments-grid{gap:14px}.exp-stage{padding-left:12px;padding-right:12px}}
@container (max-width:600px){.experiments-content{padding:28px 20px 24px}}
@container (max-width:540px){.experiments-grid{grid-template-columns:1fr}}
@media(max-width:440px){.dock{gap:3px;padding:6px 6px 5px;max-width:calc(100vw - 12px)}.dock-item{width:calc((100vw - 65px)/6);height:41px;max-width:39px}.dock-icon{width:100%;height:auto;aspect-ratio:1}.dock-separator{margin:3px 0}}
@media(prefers-reduced-motion:reduce){.work-experiments *,.work-experiments *::before,.work-experiments *::after{animation:none!important;transition:none!important}.exp-save.is-saving .exp-save-icon{border-style:dotted}}