/* Clock and optional progress keep the canonical time accessible. */ .focus-mini-timer{position:fixed;inset:auto 16px 90px auto;z-index:70;padding:16px;border:1px solid #ffffff28;border-radius:18px;background:#181510eb;color:#fff;box-shadow:0 15px 60px #0005;max-inline-size:calc(var(--focus-viewport-width,100vw) - 32px);--text:#fff;--muted:#ddd5c7;--card:#181510;--border:#ffffff38;--row:#ffffff0f} .focus-mini-time{display:block;text-align:center;font-size:52px;font-weight:600} #panel-focus #focus-root.focus-os-v4 .focus-settings-card{min-inline-size:0;overflow-wrap:anywhere} #panel-focus #focus-root.focus-os-v4 .focus-hidden-priority{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:8px;overflow-wrap:anywhere} #panel-focus #focus-root.focus-os-v4 .focus-hidden-priorities>summary{min-block-size:44px;padding-block:12px} #panel-focus #focus-root.focus-os-v4 .focus-stats-calendar{inline-size:100%;min-inline-size:0;direction:ltr} #panel-focus #focus-root.focus-os-v4 .focus-stat-controls>.focus-studio-field{flex:1 1 0;min-inline-size:0} #panel-focus #focus-root.focus-os-v4 .focus-theme-card{min-inline-size:44px;white-space:normal;overflow-wrap:anywhere} #panel-focus #focus-root.focus-os-v4[data-show-timer-progress=true] .focus-session-progress:not([hidden]){display:block;inline-size:min(320px,100%);font-size:12px;text-align:center} #panel-focus #focus-root.focus-os-v4 .focus-desktop-clock small{font-size:clamp(14px,1.8cqw,22px);letter-spacing:0;margin-inline-start:8px} #panel-focus #focus-root.focus-os-v4 .focus-clock-separator{font-style:normal} #panel-focus #focus-root.focus-os-v4[data-focus-clock=flip] .focus-clock-digit{display:inline-block;padding:10px 8px;margin:4px;background:#362844d9;border:1px solid #ffffff28;border-radius:12px;font-size:.8em} #panel-focus #focus-root.focus-os-v4[data-focus-clock=analog] .focus-desktop-clock{display:none} #panel-focus #focus-root.focus-os-v4 .focus-analog-clock{display:none;position:relative;inline-size:180px;block-size:180px;margin:auto;border:2px solid #ffffffb3;border-radius:50%;background:#33244066} #panel-focus #focus-root.focus-os-v4[data-focus-clock=analog] .focus-analog-clock{display:block} #panel-focus #focus-root.focus-os-v4 .focus-clock-hand{position:absolute;inset:50% auto auto 50%;inline-size:3px;transform-origin:50% 100%;background:#fff;border-radius:2px} #panel-focus #focus-root.focus-os-v4 .focus-clock-hour{block-size:45px;transform:translate(-50%,-100%) rotate(var(--clock-hour))} #panel-focus #focus-root.focus-os-v4 .focus-clock-minute{block-size:66px;transform:translate(-50%,-100%) rotate(var(--clock-minute))} #panel-focus #focus-root.focus-os-v4 .focus-clock-second{block-size:72px;inline-size:1px;transform:translate(-50%,-100%) rotate(var(--clock-second));background:#d0aef8} #panel-focus #focus-root.focus-os-v4 .focus-analog-clock[data-seconds=false] .focus-clock-second{display:none} /* Focus has one viewport owner. Long tools use a separate native dialog with a single content scroller. Domain controls and drafts keep their identities. */ .focus-os-v4{--focus-viewport-inline-start:var(--focus-viewport-left,0px);--focus-viewport-inline-end:calc(100vw - var(--focus-viewport-width,100vw) - var(--focus-viewport-left,0px));--focus-viewport-bottom:calc(100dvh - var(--focus-viewport-top,0px) - var(--focus-viewport-height,100dvh));--focus-glass:rgb(12 10 7 / .52);--focus-glass-hover:rgb(52 45 33 / .82);--focus-line:#f6f0e538;--focus-blur:blur(22px) saturate(110%);--focus-surface:#181510;--focus-surface-solid:#181510;--focus-surface-muted:#211d16;--focus-surface-raised:rgb(24 21 16 / .96);--focus-action:#9bc8a7;--focus-action-ink:#0c1a10;--focus-focus-ring:#d8eacb;--text:#f6f0e5;--muted:#d3cbbb;--border:#f6f0e542;--input:rgb(12 10 7 / .7);--card:rgb(24 21 16 / .96);--row:#f6f0e50f;--focus-accent:#dfbd86;--focus-accent-text:#0c0a07;--focus-timer-size:clamp(72px,min(15cqw,26cqh),210px);--focus-flip-size:clamp(26px,min(10cqw,12cqh),64px);font-family:var(--font,Arial,sans-serif);color:var(--text);color-scheme:dark} html .workspace-framed #panel-focus #focus-root.focus-os-v4,#panel-focus #focus-root.focus-os-v4{display:flex;flex-direction:column;isolation:isolate;position:relative;inline-size:var(--focus-viewport-width,100%);block-size:100dvh;block-size:var(--focus-viewport-height,100dvh);min-inline-size:0;min-block-size:0;max-inline-size:none;padding:max(clamp(16px,3vw,40px),env(safe-area-inset-top)) max(clamp(16px,3vw,40px),env(safe-area-inset-right)) max(clamp(16px,3vw,40px),env(safe-area-inset-bottom)) max(clamp(16px,3vw,40px),env(safe-area-inset-left));gap:0;border:0;border-radius:0;background:#0c0a07;box-shadow:none;overflow:auto;overscroll-behavior:contain;container:focus-canvas / size} html[dir="rtl"] #panel-focus #focus-root.focus-os-v4{--focus-viewport-inline-start:calc(100vw - var(--focus-viewport-width,100vw) - var(--focus-viewport-left,0px));--focus-viewport-inline-end:var(--focus-viewport-left,0px)} body.focus-studio-active{overflow:hidden} body.focus-studio-active :is(.top,.workspace-navigation-sidebar,.workspace-utilities,.workspace-mobile-nav,.app-shell>.footer){display:none!important} body.focus-studio-active #panel-focus #focus-root.focus-os-v4{position:fixed;inset:auto;top:var(--focus-viewport-top,0px);left:var(--focus-viewport-left,0px);z-index:35} #panel-focus #focus-root.focus-os-v4[hidden],#panel-focus:not(.active) #focus-root.focus-os-v4{display:none!important} #panel-focus #focus-root.focus-os-v4::before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--focus-studio-photo);background-size:cover;background-position:center;pointer-events:none} #panel-focus #focus-root.focus-os-v4::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgb(12 10 7 / .16),transparent 16% 78%,rgb(12 10 7 / .22)),radial-gradient(ellipse at center,transparent 42%,rgb(12 10 7 / calc(var(--focus-studio-dim,.28) * .9)) 100%)} html .workspace-framed #panel-focus #focus-root.focus-os-v4[data-studio-theme=paper],#panel-focus #focus-root.focus-os-v4[data-studio-theme=paper]{background:#685d79} #panel-focus #focus-root.focus-os-v4[data-studio-treatment=cool]::before{filter:grayscale(.2) hue-rotate(15deg)} #panel-focus #focus-root.focus-os-v4[data-studio-treatment=mist]::before{filter:saturate(.45)} #panel-focus #focus-root.focus-os-v4[data-decorative-motion=true]::before{animation:focus-scene-drift 70s ease-in-out infinite alternate} @keyframes focus-scene-drift{from{transform:scale(1.015) translateX(-.5%)}to{transform:scale(1.045) translateX(.5%)}} .focus-background-video{position:absolute;inset:0;inline-size:100%;block-size:100%;z-index:-2;pointer-events:none;border:0} #panel-focus #focus-root.focus-os-v4 .focus-wallpaper,#panel-focus #focus-root.focus-os-v4 .focus-scene-art-slot{display:none!important} #panel-focus #focus-root.focus-os-v4 #focus-next-thought{font-size:0!important;white-space:nowrap;overflow:hidden} #panel-focus #focus-root.focus-os-v4 .focus-clear-dialog{background:#0c0a07 var(--focus-studio-photo) center/cover;border:0;inline-size:100vw;block-size:100dvh;max-inline-size:none;max-block-size:none;padding:20px;overflow:auto} #panel-focus #focus-root.focus-os-v4 .focus-clear-dialog .focus-stage{min-block-size:calc(var(--focus-viewport-height,100dvh) - 110px);margin:auto} #panel-focus #focus-root.focus-os-v4 :is(button,summary,input,select,textarea){font-family:inherit;box-sizing:border-box} #panel-focus #focus-root.focus-os-v4 :is(button,summary){min-block-size:44px;min-inline-size:44px;font-size:14px;color:#fff;border:1px solid transparent;box-shadow:none;cursor:pointer} #panel-focus #focus-root.focus-os-v4 button:disabled{cursor:default;opacity:.5} #panel-focus #focus-root.focus-os-v4 :focus-visible{outline:3px solid var(--focus-focus-ring);outline-offset:4px} .focus-visually-hidden{position:absolute!important;inline-size:1px!important;block-size:1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap} .focus-icon{inline-size:22px;block-size:22px;filter:brightness(0) invert(1);display:block;flex-shrink:0} #panel-focus #focus-root.focus-os-v4 .focus-heading{flex:0 0 auto;display:flex;align-items:start;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;min-inline-size:0;padding:0;margin:0;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none} #panel-focus #focus-root.focus-os-v4 .focus-workspace-return{display:flex;align-items:center;gap:10px;min-block-size:44px;padding:0;background:none;border:0;border-radius:8px;text-decoration:none} .focus-workspace-return strong{font-size:26px;letter-spacing:-.04em}.focus-workspace-return>img{inline-size:28px;block-size:28px;border-radius:6px} #panel-focus #focus-root.focus-os-v4 .focus-daily-thought{padding:8px 0;margin:0;display:flex;align-items:center;gap:12px;background:none;border:0;max-inline-size:46ch;min-block-size:44px;text-align:end} #panel-focus #focus-root.focus-os-v4 .focus-daily-thought>.focus-widget-eyebrow{display:none}#panel-focus #focus-root.focus-os-v4 .focus-daily-thought p{font-size:clamp(18px,1.8vw,26px);line-height:1.45;font-weight:500;margin:0;color:#fff;text-shadow:0 1px 8px #21143280} #panel-focus #focus-root.focus-os-v4 #focus-next-thought{padding:0;inline-size:44px;background:none;border:0;font-size:0}#panel-focus #focus-root.focus-os-v4 #focus-next-thought::after{content:'↻';font-size:24px} #panel-focus #focus-root.focus-os-v4 :is(.focus-desktop-feedback,.focus-feedback){flex:0 0 auto;padding:8px 12px;margin:8px 0 0;background:#0c0a07ed;color:#fff;border-radius:8px;font-size:13px;max-inline-size:70ch} #panel-focus #focus-root.focus-os-v4 :is(.focus-feedback:empty,.focus-desktop-feedback:empty){display:none} #panel-focus #focus-root.focus-os-v4 .focus-desktop-body{flex:1 1 0;min-inline-size:0;min-block-size:0;display:grid;grid-template-columns:minmax(0,1fr);inline-size:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--muted) transparent;scroll-padding-block:12px} #panel-focus #focus-root.focus-os-v4 .focus-desktop-layout{display:grid;inline-size:100%;min-inline-size:0;min-block-size:100%;block-size:auto;padding:0;overflow:visible} #panel-focus #focus-root.focus-os-v4 .focus-desktop-widgets{display:none} #panel-focus #focus-root.focus-os-v4 .focus-workspace{display:flex;flex-direction:column;align-items:center;justify-content:safe center;inline-size:100%;block-size:auto;min-inline-size:0;min-block-size:100%;padding:8px;margin:0;position:relative;overflow:visible} #panel-focus #focus-root.focus-os-v4 .focus-stage-slot{inline-size:100%;min-inline-size:0;min-block-size:0;display:grid;place-items:safe center} #panel-focus #focus-root.focus-os-v4 .focus-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;inline-size:min(100%,760px);min-block-size:0;padding:16px 0;margin:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none} #panel-focus #focus-root.focus-os-v4 .focus-studio-intention{font-size:clamp(22px,2.6vw,34px);font-weight:600;line-height:1.35;max-inline-size:min(100%,44ch);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding:0 12px;background:none;border:0;border-radius:8px} #panel-focus #focus-root.focus-os-v4 .focus-session-toolbar{display:flex;flex-direction:column;align-items:center;gap:0;padding:0;border:0;background:none}#panel-focus #focus-root.focus-os-v4 .focus-quick-modes{display:none} #panel-focus #focus-root.focus-os-v4 .focus-quick-phases{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;max-inline-size:100%} #panel-focus #focus-root.focus-os-v4 .focus-quick-phase{padding:8px 10px;border:0;background:none;border-radius:9px;color:#f6f0e5;font-size:15px;font-weight:600;text-transform:uppercase;opacity:1} #panel-focus #focus-root.focus-os-v4 .focus-quick-phase[aria-pressed=true]{opacity:1;color:#fff;box-shadow:inset 0 -2px #fff} #panel-focus #focus-root.focus-os-v4 .focus-rounds{display:flex;justify-content:center;align-self:center;gap:7px;margin:2px auto 0;padding:0;inline-size:auto} #panel-focus #focus-root.focus-os-v4 .focus-rounds>span{inline-size:8px;block-size:8px;border-radius:50%;background:#ffffff50;display:grid;place-items:center;opacity:.65}#panel-focus #focus-root.focus-os-v4 .focus-rounds>span.is-complete{background:#fff;opacity:1} #panel-focus #focus-root.focus-os-v4 .focus-rounds:has(img)>span{inline-size:20px;block-size:20px;background:none}#panel-focus #focus-root.focus-os-v4 .focus-rounds .focus-icon{inline-size:18px;block-size:18px;transform:scale(var(--tally-growth,1))} #panel-focus #focus-root.focus-os-v4 .focus-timer-row{display:flex;flex-direction:column;align-items:center;gap:14px;inline-size:100%;margin-block:0} #panel-focus #focus-root.focus-os-v4 .focus-dial{display:flex;flex-direction:column;align-items:center;justify-content:center;inline-size:100%;block-size:auto;min-block-size:0;margin:0;aspect-ratio:auto;border:0;border-radius:0;background:none;box-shadow:none} #panel-focus #focus-root.focus-os-v4 .focus-dial::before,#panel-focus #focus-root.focus-os-v4 .focus-dial::after{display:none} #panel-focus #focus-root.focus-os-v4 .focus-time{font-size:var(--focus-timer-size);line-height:1.08;letter-spacing:-.055em;font-weight:700;color:var(--text);overflow:visible;margin:0;white-space:nowrap;direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;text-shadow:0 2px 18px rgb(12 10 7 / .28)} #panel-focus #focus-root.focus-os-v4[data-clock-size=small]{--focus-timer-size:clamp(52px,min(7.8cqw,18cqh),104px)}#panel-focus #focus-root.focus-os-v4[data-clock-size=huge]{--focus-timer-size:clamp(64px,min(12cqw,22cqh),176px)} #panel-focus #focus-root.focus-os-v4 .focus-time[data-focus-time-length="7"]{font-size:min(var(--focus-timer-size),calc((100cqw - 48px)/4.8))} #panel-focus #focus-root.focus-os-v4 .focus-time[data-focus-time-length="8"]{font-size:min(var(--focus-timer-size),calc((100cqw - 48px)/5.5))} #panel-focus #focus-root.focus-os-v4 :is(.focus-phase-name,.focus-session-state,.focus-timer-controls>.focus-secondary-controls,.focus-reset-hint,#focus-change-duration,.focus-next,.focus-stage>.focus-caption,.focus-stage-intention,.focus-set-intention,.focus-session-summary,.focus-session-progress){display:none} #panel-focus #focus-root.focus-os-v4 .focus-stage:has(#focus-undo:not([hidden])) .focus-reset-hint{display:block;max-inline-size:44ch;text-align:center} #panel-focus #focus-root.focus-os-v4 .focus-timer-controls{display:flex;justify-content:center;inline-size:auto} #panel-focus #focus-root.focus-os-v4 .focus-primary-controls{display:flex;flex-direction:row;justify-content:center;flex-wrap:nowrap;gap:10px;inline-size:auto} #panel-focus #focus-root.focus-os-v4 .focus-primary-controls>button{display:flex;align-items:center;justify-content:center;flex:0 0 auto;inline-size:54px;min-inline-size:54px;min-block-size:54px;padding:10px;border:1px solid var(--focus-line);border-radius:14px;background:var(--focus-glass);color:#fff;backdrop-filter:var(--focus-blur)} #panel-focus #focus-root.focus-os-v4 .focus-primary-controls>button:hover:not(:disabled){background:var(--focus-glass-hover);transform:translateY(-1px)}#panel-focus #focus-root.focus-os-v4 .focus-primary-controls .focus-icon{inline-size:24px;block-size:24px} #panel-focus #focus-root.focus-os-v4 .focus-estimated-end{color:#eee7f6;font-size:12px;line-height:1.5;margin:12px 0 0} #panel-focus #focus-root.focus-os-v4[data-show-timer-digits=false] #focus-time,#panel-focus #focus-root.focus-os-v4[data-timer-style=flip] #focus-time,#panel-focus #focus-root.focus-os-v4[data-timer-style=matrix] #focus-time{position:absolute;inline-size:1px!important;block-size:1px!important;clip-path:inset(50%)} #panel-focus #focus-root.focus-os-v4 .focus-timer-visual{inline-size:min(100%,560px);min-inline-size:0;position:relative;text-align:center}#panel-focus #focus-root.focus-os-v4 .focus-timer-visual canvas{inline-size:min(100%,320px);block-size:auto;max-block-size:210px;object-fit:contain;margin-inline:auto}#panel-focus #focus-root.focus-os-v4 .focus-timer-visual progress{display:block;inline-size:min(320px,100%);block-size:10px;border:0;border-radius:20px;accent-color:var(--focus-action);margin:18px auto} #panel-focus #focus-root.focus-os-v4 .focus-timer-flip{display:flex;justify-content:center;align-items:center;min-inline-size:0;gap:clamp(2px,1cqw,5px);direction:ltr;unicode-bidi:isolate}#panel-focus #focus-root.focus-os-v4 .focus-flip-number{background:var(--focus-surface-raised);border:1px solid var(--focus-line);border-radius:10px;padding:clamp(6px,1.5cqw,10px) clamp(5px,1cqw,8px);font-size:var(--focus-flip-size);font-weight:700;line-height:1.1;position:relative}#panel-focus #focus-root.focus-os-v4 .focus-flip-number::after{content:"";position:absolute;inset:50% 0 auto;block-size:1px;background:#0007}#panel-focus #focus-root.focus-os-v4 .focus-timer-flip .is-separator{font-size:calc(var(--focus-flip-size)*.75)} #panel-focus #focus-root.focus-os-v4[data-timer-style=gauge] .focus-timer-visual,#panel-focus #focus-root.focus-os-v4[data-timer-style=pie] .focus-timer-visual{margin-block-start:-140px;pointer-events:none}#panel-focus #focus-root.focus-os-v4[data-timer-style=gauge] #focus-time,#panel-focus #focus-root.focus-os-v4[data-timer-style=pie] #focus-time{font-size:54px!important;min-block-size:130px;display:grid;place-items:center} #panel-focus #focus-root.focus-os-v4 .focus-desktop-intro{text-align:center;inline-size:100%;min-inline-size:0} #panel-focus #focus-root.focus-os-v4 #focus-desktop-greeting{font-size:clamp(18px,2vw,26px);font-weight:500;color:#fff;margin:22px 0 0} #panel-focus #focus-root.focus-os-v4 .focus-clock-stack{display:flex;flex-direction:column;align-items:center;gap:0} #panel-focus #focus-root.focus-os-v4 .focus-desktop-clock{font-size:clamp(80px,min(16cqw,28cqh),220px);font-weight:400;line-height:.92;letter-spacing:-.045em;color:#f7f5ee;max-inline-size:100%;font-variant-numeric:tabular-nums;white-space:nowrap;direction:ltr;unicode-bidi:isolate;text-align:center} #panel-focus #focus-root.focus-os-v4 .focus-desktop-date,#panel-focus #focus-root.focus-os-v4 .focus-desktop-welcome{display:none} #panel-focus #focus-root.focus-os-v4[data-focus-view=dashboard] .focus-stage-slot,#panel-focus #focus-root.focus-os-v4[data-focus-view=ambient] .focus-stage-slot{display:none!important} #panel-focus #focus-root.focus-os-v4 .focus-ambient-session{position:absolute;inset-block-start:8px;inset-inline-end:8px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 6px;padding:16px 22px 10px;min-inline-size:min(220px,calc(100% - 16px));border:1px solid #f3f0e933;border-radius:22px;background:rgb(12 10 7 / .46);backdrop-filter:blur(22px) saturate(130%);box-shadow:inset 0 1px #ffffff2e,0 16px 40px rgb(12 10 7 / .28)} #panel-focus #focus-root.focus-os-v4 .focus-ambient-time{flex:1 0 100%;font-size:clamp(42px,5.4vw,72px);font-weight:400;line-height:1;letter-spacing:-.04em;text-align:center;font-variant-numeric:tabular-nums;direction:ltr}#panel-focus #focus-root.focus-os-v4 .focus-ambient-session button{background:rgb(12 10 7 / .55)!important;border:1px solid #f3f0e924!important;border-radius:14px!important;padding:8px!important;font-size:12px} #panel-focus #focus-root.focus-os-v4 .focus-os-footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:12px;padding:14px 0 0;margin:0;background:none;border:0;min-block-size:58px} #panel-focus #focus-root.focus-os-v4 .focus-os-scene-name,#panel-focus #focus-root.focus-os-v4 .focus-boundary,#panel-focus #focus-root.focus-os-v4 .focus-os-sound-status{display:none!important} #panel-focus #focus-root.focus-os-v4 :is(.focus-tools,.focus-mode-dock){position:static;display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;inline-size:auto;gap:5px;padding:5px;border:1px solid var(--focus-line);border-radius:14px;background:var(--focus-glass);backdrop-filter:var(--focus-blur);box-shadow:inset 0 1px #ffffff12} #panel-focus #focus-root.focus-os-v4 :is(.focus-tool,.focus-view-button,#focus-personalize,#focus-desktop-fullscreen,#focus-streak-open){display:flex;align-items:center;justify-content:center;inline-size:44px;min-block-size:44px;padding:10px;border-radius:10px;background:none;border:0} #panel-focus #focus-root.focus-os-v4 .focus-view-switch{display:flex;flex-direction:row;gap:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none} #panel-focus #focus-root.focus-os-v4 .focus-tools [data-focus-tool]{display:flex;align-items:center;justify-content:center;inline-size:44px;min-block-size:44px;padding:10px;border-radius:10px;background:none;border:0} #panel-focus #focus-root.focus-os-v4 .focus-toolbar-menu [data-focus-tool]{display:flex;align-items:center;gap:12px;inline-size:100%} #panel-focus #focus-root.focus-os-v4 .focus-toolbar-menu .focus-visually-hidden{position:static!important;inline-size:auto!important;block-size:auto!important;clip-path:none;overflow:visible!important;white-space:normal} #panel-focus #focus-root.focus-os-v4 :is(.focus-view-button[aria-pressed=true],.focus-tool[aria-expanded=true]){background:#315c43;box-shadow:inset 0 1px #ffffff24;color:#fff} #panel-focus #focus-root.focus-os-v4 :is(.focus-tool,.focus-view-button,#focus-personalize,#focus-desktop-fullscreen,#focus-streak-open):hover{background:var(--focus-glass-hover)} #panel-focus #focus-root.focus-os-v4 #focus-streak-open{inline-size:auto!important;gap:6px}#panel-focus #focus-root.focus-os-v4 #focus-streak-open .focus-icon{inline-size:19px;block-size:19px}#panel-focus #focus-root.focus-os-v4 .focus-streak-value{font-size:13px;font-weight:600} #panel-focus #focus-root.focus-os-v4 .focus-toolbar-more{position:relative;margin:0;padding:0}#panel-focus #focus-root.focus-os-v4 .focus-toolbar-more>summary{list-style:none;display:grid;place-items:center;padding:8px;inline-size:44px;border-radius:10px;font-size:0!important}#panel-focus #focus-root.focus-os-v4 .focus-toolbar-more>summary::after{content:'⋯';font-size:25px}#panel-focus #focus-root.focus-os-v4 .focus-toolbar-more>summary::-webkit-details-marker{display:none} #panel-focus #focus-root.focus-os-v4 .focus-toolbar-menu{position:fixed;inset:auto 20px 90px auto;inline-size:min(290px,calc(var(--focus-viewport-width,100vw) - 24px));padding:8px;max-block-size:calc(var(--focus-viewport-height,100dvh) - 110px);overflow:auto;z-index:80;border:1px solid var(--focus-line);border-radius:16px;background:#181510f7;color:#fff;box-shadow:0 16px 60px #180b3466}#panel-focus #focus-root.focus-os-v4 .focus-toolbar-menu:popover-open{display:grid;gap:5px}#panel-focus #focus-root.focus-os-v4 .focus-toolbar-menu>button{min-block-size:44px!important;inline-size:100%;text-align:start;background:none;border:0;border-radius:8px;padding:10px 12px} .focus-os-v4.focus-controls-away :is(.focus-heading,.focus-os-footer){opacity:0;pointer-events:none} /* One native dialog becomes a settings drawer or a floating task/note/sound tool. */ #panel-focus #focus-root.focus-os-v4 .focus-tool-dialog{color:#fff;background:#181510f5;border:1px solid #ffffff2e;box-shadow:0 18px 80px #13072173;backdrop-filter:var(--focus-blur);padding:0;inline-size:min(940px,calc(var(--focus-viewport-width,100vw) - 40px));max-inline-size:none;block-size:min(680px,calc(var(--focus-viewport-height,100dvh) - 48px));max-block-size:calc(var(--focus-viewport-height,100dvh) - 24px);margin:auto;border-radius:20px;overflow:hidden} #panel-focus #focus-root.focus-os-v4 .focus-tool-dialog[open]{display:flex;flex-direction:column}#panel-focus #focus-root.focus-os-v4 .focus-tool-dialog::backdrop{background:#0f091a3d;backdrop-filter:blur(3px)} #panel-focus #focus-root.focus-os-v4 .focus-tool-dialog-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:10px;flex:0 0 auto;padding:14px 20px;margin:0;background:none;border-block-end:1px solid #ffffff16}#panel-focus #focus-root.focus-os-v4 .focus-tool-dialog-heading h2{font-size:18px;font-weight:600;color:#fff;margin:0}#panel-focus #focus-root.focus-os-v4 #focus-close-tool{border:0;border-radius:10px;background:#ffffff0c;padding:8px 12px;color:#fff} #panel-focus #focus-root.focus-os-v4 .focus-tool-dialog-body{display:block;min-block-size:0;flex:1 1 0;overflow:auto;padding:20px;overscroll-behavior:contain;scrollbar-color:#afa1bf transparent} #panel-focus #focus-root.focus-os-v4 .focus-settings-drawer .focus-tool-dialog-body{display:grid;grid-template-columns:190px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:16px 28px;padding:0 24px 0 0;overflow:hidden}#panel-focus #focus-root.focus-os-v4 .focus-settings-drawer .focus-tool-dialog-heading{justify-content:end;border:0;padding:10px 14px 0} #panel-focus #focus-root.focus-os-v4 .focus-settings-nav{grid-column:1;grid-row:1/3;padding:0 12px 20px 16px;display:flex;flex-direction:column;gap:4px;overflow:auto;border-inline-end:1px solid #ffffff12}#panel-focus #focus-root.focus-os-v4 .focus-settings-nav button{display:flex;align-items:center;gap:12px;background:none;border:0;border-radius:10px;min-block-size:46px;padding:10px 12px;text-align:start;flex-shrink:0}#panel-focus #focus-root.focus-os-v4 .focus-settings-nav button[aria-current=page]{background:#ffffff14;box-shadow:inset 0 1px #ffffff12}#panel-focus #focus-root.focus-os-v4 .focus-settings-label{font-size:14px} #panel-focus #focus-root.focus-os-v4 .focus-settings-heading{grid-column:2;grid-row:1;padding-block:0 8px}#panel-focus #focus-root.focus-os-v4 .focus-settings-heading h2{font-size:22px;font-weight:650;line-height:1.4;margin:0}#panel-focus #focus-root.focus-os-v4 .focus-settings-intro{font-size:13px;color:#d3cbbb;margin:6px 0 0} #panel-focus #focus-root.focus-os-v4 .focus-desktop-utilities{display:block;inline-size:100%;max-inline-size:none;min-inline-size:0;min-block-size:0;padding:0;margin:0;overflow:visible}#panel-focus #focus-root.focus-os-v4 .focus-settings-drawer .focus-desktop-utilities{grid-column:2;grid-row:2;overflow:auto;overflow-x:hidden;padding:0 4px 24px;overscroll-behavior:contain} #panel-focus #focus-root.focus-os-v4 .focus-desktop-utilities>.focus-options{display:block;background:none;border:0;border-radius:0;box-shadow:none;padding:0;margin:0;overflow:visible;max-block-size:none} #panel-focus #focus-root.focus-os-v4 .focus-desktop-utilities>.focus-options[hidden]{display:none!important}#panel-focus #focus-root.focus-os-v4 .focus-tool-dialog .focus-options>summary{display:none}#panel-focus #focus-root.focus-os-v4 .focus-tool-dialog .focus-options-body{padding:0;display:block;background:none;border:0} #panel-focus #focus-root.focus-os-v4 .focus-tool-dialog :is(.focus-card,.focus-notes,.focus-mixer){background:none;border:0;padding:0;border-radius:0;color:#fff}#panel-focus #focus-root.focus-os-v4 .focus-tool-dialog .focus-caption{font-size:12px;line-height:1.6;color:#ddd5c7;margin-block:10px} #panel-focus #focus-root.focus-os-v4 .focus-tool-dialog :is(input:not([type=checkbox]):not([type=range]),select,textarea){border:1px solid #ffffff45;border-radius:10px;background:#0c0a0794;color:#fff;padding:10px 12px;min-block-size:44px;font-size:16px;max-inline-size:100%;inline-size:100%;box-shadow:none} #panel-focus #focus-root.focus-os-v4 .focus-tool-dialog :is(input,select,textarea):focus-visible{outline:2px solid var(--focus-focus-ring);outline-offset:2px}#panel-focus #focus-root.focus-os-v4 .focus-tool-dialog input[type=checkbox]{accent-color:var(--focus-action);inline-size:20px;block-size:20px;flex:0 0 auto}#panel-focus #focus-root.focus-os-v4 .focus-tool-dialog input[type=range]{inline-size:100%;accent-color:#bf93f6} #panel-focus #focus-root.focus-os-v4 .focus-tool-dialog :is(.focus-button,.focus-studio-button){border:1px solid #ffffff26;background:#ffffff09;padding:10px 14px;border-radius:10px;min-block-size:44px;color:#fff}#panel-focus #focus-root.focus-os-v4 .focus-tool-dialog .focus-primary{background:var(--focus-action);color:var(--focus-action-ink);border-color:transparent;font-weight:650}#panel-focus #focus-root.focus-os-v4 .focus-tool-dialog button:hover:not(:disabled){background:#ffffff1c}#panel-focus #focus-root.focus-os-v4 .focus-tool-dialog .focus-primary:hover:not(:disabled){background:#b9d9be} #panel-focus #focus-root.focus-os-v4 .focus-settings-card{border:0;padding:18px 0;margin:0;border-block-end:1px solid #ffffff14;display:grid;gap:14px;background:none}#panel-focus #focus-root.focus-os-v4 .focus-settings-card h3{font-size:15px;font-weight:600;margin:0;color:#fff} #panel-focus #focus-root.focus-os-v4 :is(.focus-studio-field,.focus-tool-dialog .focus-field){display:flex;flex-direction:column;gap:8px;font-size:13px;color:#ddd5c7;min-inline-size:0;line-height:1.5;margin-block:12px}#panel-focus #focus-root.focus-os-v4 :is(.focus-studio-check,.focus-tool-dialog .focus-check){flex-direction:row;align-items:center;justify-content:space-between;gap:16px;padding-block:4px} #panel-focus #focus-root.focus-os-v4 .focus-settings-footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:12px 24px;background:#0c0a07e6;border-block-start:1px solid #ffffff16}#panel-focus #focus-root.focus-os-v4 .focus-studio-state{font-size:12px;line-height:1.4;color:#ddd5c7;margin:0} #panel-focus #focus-root.focus-os-v4 .focus-preference-owner{display:contents}#panel-focus #focus-root.focus-os-v4 .focus-original-preference-save,#panel-focus #focus-root.focus-os-v4 .focus-preference-owner>.focus-caption{display:none}#panel-focus #focus-root.focus-os-v4 #focus-sheet-discard{min-block-size:44px;align-self:start;margin:10px 20px 14px;background:none;color:#fff} #panel-focus #focus-root.focus-os-v4 :is(.focus-theme-mode-switch,.focus-theme-categories,.focus-stats-periods){display:flex;flex-wrap:wrap;gap:6px;margin-block:0 16px}#panel-focus #focus-root.focus-os-v4 :is(.focus-theme-mode-switch,.focus-theme-categories,.focus-stats-periods) button{background:none;border:0;border-radius:8px;padding:8px 12px;min-block-size:44px}#panel-focus #focus-root.focus-os-v4 :is(.focus-theme-mode-switch,.focus-theme-categories,.focus-stats-periods) button[aria-pressed=true]{background:#ffffff16;box-shadow:inset 0 1px #ffffff12} #panel-focus #focus-root.focus-os-v4 .focus-theme-preview{position:relative;aspect-ratio:2.2;overflow:hidden;background:#4f4660;border-radius:14px;display:flex;align-items:end;padding:16px;gap:12px;margin-block:12px 18px}#panel-focus #focus-root.focus-os-v4 .focus-theme-preview img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}#panel-focus #focus-root.focus-os-v4 .focus-theme-preview::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,#180d2cb3);pointer-events:none}#panel-focus #focus-root.focus-os-v4 .focus-theme-preview :is(span,button){position:relative;z-index:1}#panel-focus #focus-root.focus-os-v4 .focus-theme-preview span{flex:1;font-size:15px;font-weight:600}#panel-focus #focus-root.focus-os-v4 .focus-theme-preview button{background:#1b1329bd;border:1px solid #ffffff38;padding:8px 12px;border-radius:10px} #panel-focus #focus-root.focus-os-v4 .focus-theme-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}#panel-focus #focus-root.focus-os-v4 .focus-theme-card{display:flex;flex-direction:column;align-items:start;gap:8px;background:#ffffff09;border:1px solid #ffffff16;border-radius:12px;overflow:hidden;padding:0 0 10px;text-align:start}#panel-focus #focus-root.focus-os-v4 .focus-theme-card[aria-pressed=true]{outline:2px solid var(--focus-action);outline-offset:2px}#panel-focus #focus-root.focus-os-v4 .focus-theme-card img{inline-size:100%;block-size:auto;aspect-ratio:1.6;object-fit:cover}#panel-focus #focus-root.focus-os-v4 .focus-theme-card :is(span,small){padding-inline:10px;font-size:12px;line-height:1.4}#panel-focus #focus-root.focus-os-v4 .focus-theme-card:not(:has(img)){justify-content:end;min-block-size:100px;background:#685d79} #panel-focus #focus-root.focus-os-v4 .focus-style-previews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}#panel-focus #focus-root.focus-os-v4 .focus-style-previews button{background:#ffffff08;padding:16px 8px 10px;display:flex;flex-direction:column;gap:14px;border:1px solid #ffffff18;border-radius:12px;font-size:12px;align-items:center}#panel-focus #focus-root.focus-os-v4 .focus-style-previews button[aria-pressed=true]{border-color:var(--focus-action);background:#9bc8a71c}#panel-focus #focus-root.focus-os-v4 .focus-style-sample{font-size:24px;font-weight:650}#panel-focus #focus-root.focus-os-v4 .focus-style-sample[data-timer-style=flip]{background:#ffffff16;padding:4px;border-radius:4px}#panel-focus #focus-root.focus-os-v4 .focus-style-sample:is([data-timer-style=gauge],[data-timer-style=pie]){border:4px solid #dcc4fc;border-radius:50%;font-size:15px;inline-size:60px;block-size:60px;display:grid;place-items:center} #panel-focus #focus-root.focus-os-v4 .focus-type-preview{font-size:56px;text-align:center;margin:10px 0 0} #panel-focus #focus-root.focus-os-v4[data-type-style=light] :is(.focus-time,.focus-desktop-clock),.focus-type-preview[data-type-style=light]{font-weight:300!important}#panel-focus #focus-root.focus-os-v4[data-type-style=soft] :is(.focus-time,.focus-desktop-clock),.focus-type-preview[data-type-style=soft]{font-family:ui-rounded,'Trebuchet MS',var(--font)!important;font-weight:600!important}#panel-focus #focus-root.focus-os-v4[data-type-style=bubble] :is(.focus-time,.focus-desktop-clock),.focus-type-preview[data-type-style=bubble]{font-family:ui-rounded,'Trebuchet MS',var(--font)!important;font-weight:900!important;letter-spacing:-.04em!important}#panel-focus #focus-root.focus-os-v4[data-type-style=minimal-light] :is(.focus-time,.focus-desktop-clock),.focus-type-preview[data-type-style=minimal-light]{font-weight:300!important;letter-spacing:.025em!important}#panel-focus #focus-root.focus-os-v4[data-type-style=minimal] :is(.focus-time,.focus-desktop-clock),.focus-type-preview[data-type-style=minimal]{font-weight:450!important;letter-spacing:.005em!important}#panel-focus #focus-root.focus-os-v4[data-type-style=serif] :is(.focus-time,.focus-desktop-clock),.focus-type-preview[data-type-style=serif]{font-family:Georgia,var(--font)!important;font-weight:500!important}#panel-focus #focus-root.focus-os-v4[data-type-style=condensed] :is(.focus-time,.focus-desktop-clock),.focus-type-preview[data-type-style=condensed]{font-family:Georgia,var(--font)!important;font-weight:500!important;letter-spacing:-.09em!important}#panel-focus #focus-root.focus-os-v4[data-type-style=sporty] :is(.focus-time,.focus-desktop-clock),.focus-type-preview[data-type-style=sporty]{font-weight:850!important;font-style:italic}#panel-focus #focus-root.focus-os-v4[data-type-style=wide] :is(.focus-time,.focus-desktop-clock),.focus-type-preview[data-type-style=wide]{font-weight:900!important;letter-spacing:.035em!important}#panel-focus #focus-root.focus-os-v4[data-type-style=digital] :is(.focus-time,.focus-desktop-clock),.focus-type-preview[data-type-style=digital]{font-family:ui-monospace,monospace!important;letter-spacing:-.06em!important}#panel-focus #focus-root.focus-os-v4[data-type-style=handwritten] :is(.focus-time,.focus-desktop-clock),.focus-type-preview[data-type-style=handwritten]{font-family:Georgia,var(--font)!important;font-style:italic;font-weight:500!important} #panel-focus #focus-root.focus-os-v4 .focus-stats-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}#panel-focus #focus-root.focus-os-v4 .focus-stats-cards>div{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;padding:16px;background:#ffffff08;border:1px solid #ffffff1c;border-radius:12px;min-inline-size:0}#panel-focus #focus-root.focus-os-v4 .focus-stats-cards dt{grid-column:2;font-size:12px;line-height:1.4;color:#ddd5c7}#panel-focus #focus-root.focus-os-v4 .focus-stats-cards dd{grid-column:1/-1;font-size:22px;line-height:1.4;font-weight:600;margin:0;overflow-wrap:anywhere}#panel-focus #focus-root.focus-os-v4 .focus-stat-controls{display:flex;gap:12px} #panel-focus #focus-root.focus-os-v4 .focus-stats-calendar{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,44px);grid-auto-columns:44px;gap:0;overflow-x:auto;padding:5px}#panel-focus #focus-root.focus-os-v4 .focus-stats-calendar button{min-inline-size:44px!important;inline-size:44px;min-block-size:44px!important;block-size:44px;border:0;border-radius:3px;padding:6px;background:#ffffff13;background-clip:content-box}#panel-focus #focus-root.focus-os-v4 .focus-calendar-cell[data-level="1"]{background:#614385}#panel-focus #focus-root.focus-os-v4 .focus-calendar-cell[data-level="2"]{background:#8a5bb9}#panel-focus #focus-root.focus-os-v4 .focus-calendar-cell[data-level="3"]{background:#b586e5}#panel-focus #focus-root.focus-os-v4 .focus-calendar-cell[data-level="4"]{background:#d9bbff} #panel-focus #focus-root.focus-os-v4 .focus-stats-trend{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:6px}#panel-focus #focus-root.focus-os-v4 .focus-stats-trend>div{display:grid;grid-template-rows:80px auto;align-items:end;font-size:11px;text-align:center}#panel-focus #focus-root.focus-os-v4 .focus-stats-trend progress{appearance:none;inline-size:100%;block-size:var(--focus-trend-fill);min-block-size:2px;border:0;border-radius:3px;background:#b992ec}#panel-focus #focus-root.focus-os-v4 .focus-stats-trend progress::-webkit-progress-bar,#panel-focus #focus-root.focus-os-v4 .focus-stats-trend progress::-webkit-progress-value{background:#b992ec} #panel-focus #focus-root.focus-os-v4 .focus-floating-tool{position:fixed;inset:auto auto 110px 30px;margin:0;inline-size:min(530px,calc(var(--focus-viewport-width,100vw) - 40px));block-size:min(570px,calc(var(--focus-viewport-height,100dvh) - 140px));border-radius:18px;z-index:50;background:#181510eb} #panel-focus #focus-root.focus-os-v4 .focus-floating-tool[data-focus-tool=sound]{inline-size:min(910px,calc(var(--focus-viewport-width,100vw) - 60px))} #panel-focus #focus-root.focus-os-v4 .focus-note-toolbar{display:flex;flex-wrap:wrap;gap:2px;position:sticky;inset-block-start:0;background:#211d16;z-index:1;padding:4px;border-radius:10px}#panel-focus #focus-root.focus-os-v4 .focus-note-toolbar button{padding:8px!important;inline-size:44px;min-inline-size:44px!important;min-block-size:44px!important;display:grid;place-items:center;border:0!important;background:none!important}#panel-focus #focus-root.focus-os-v4 .focus-note-toolbar .focus-icon{inline-size:18px;block-size:18px}#panel-focus #focus-root.focus-os-v4 #focus-notes{min-block-size:180px;resize:vertical;line-height:1.7}#panel-focus #focus-root.focus-os-v4 .focus-note-characters{font-size:12px;color:#d3cbbb} #panel-focus #focus-root.focus-os-v4 .focus-priority-create{display:flex;align-items:center;gap:10px;margin:0 0 12px}#panel-focus #focus-root.focus-os-v4 .focus-priority-create input{min-inline-size:0;flex:1}#panel-focus #focus-root.focus-os-v4 .focus-priority-create button{flex:0 0 auto} #panel-focus #focus-root.focus-os-v4 .focus-queue-list{display:flex;flex-direction:column;gap:8px;padding:0}#panel-focus #focus-root.focus-os-v4 .focus-queue-row{position:relative;padding:12px!important;background:#ffffff08;border:1px solid #ffffff16;border-radius:10px;gap:8px!important;flex-direction:column!important;align-items:stretch!important}#panel-focus #focus-root.focus-os-v4 .focus-queue-row>.focus-queue-actions{display:flex;gap:5px;justify-content:start;flex-wrap:wrap;inline-size:100%}#panel-focus #focus-root.focus-os-v4 .focus-queue-row>.focus-queue-actions button{padding:8px 10px!important;font-size:12px;min-block-size:44px!important} #panel-focus #focus-root.focus-os-v4 .focus-priority-menu{position:absolute;inset-block-start:5px;inset-inline-end:6px;z-index:2}#panel-focus #focus-root.focus-os-v4 .focus-priority-menu summary{display:grid;place-items:center;inline-size:44px;min-block-size:44px!important;list-style:none}#panel-focus #focus-root.focus-os-v4 .focus-priority-menu-body{position:absolute;inset-inline-end:0;inset-block-start:48px;inline-size:180px;padding:6px;background:#211d16;border:1px solid #ffffff26;border-radius:12px;box-shadow:0 8px 24px #0005}#panel-focus #focus-root.focus-os-v4 .focus-priority-menu-body button{display:block;inline-size:100%;text-align:start;border:0!important}#panel-focus #focus-root.focus-os-v4 .focus-priority-grip{position:absolute;inset-block-start:4px;inset-inline-end:54px;inline-size:44px;min-block-size:44px!important;min-inline-size:44px!important;padding:7px;border:0!important;background:none!important;cursor:grab}#panel-focus #focus-root.focus-os-v4 .focus-queue-title{padding-inline-end:108px;overflow-wrap:anywhere} #panel-focus #focus-root.focus-os-v4 .focus-sound-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}#panel-focus #focus-root.focus-os-v4 .focus-sound-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:1px solid #ffffff1c;background:#ffffff06;border-radius:12px;padding:18px 8px;font-size:12px!important;text-align:center;min-block-size:106px!important}#panel-focus #focus-root.focus-os-v4 .focus-sound-tile[aria-pressed=true]{border-color:var(--focus-action);background:#9bc8a729} #panel-focus #focus-root.focus-os-v4 .focus-mini-timer{position:fixed;inset:auto 16px 90px auto;z-index:70;padding:16px;border:1px solid #ffffff28;border-radius:18px;background:#181510eb;color:#fff;box-shadow:0 15px 60px #0005}#panel-focus #focus-root.focus-os-v4 .focus-mini-time{display:block;text-align:center;font-size:52px;font-weight:600} #panel-focus #focus-root.focus-os-v4 .focus-task-style-dialog{background:#181510;color:#fff;border:1px solid #ffffff30;padding:24px;inline-size:min(500px,calc(var(--focus-viewport-width,100vw) - 24px));max-block-size:calc(var(--focus-viewport-height,100dvh) - 24px);overflow:auto;border-radius:18px} @container focus-canvas (max-width:700px){#panel-focus #focus-root.focus-os-v4 .focus-daily-thought{max-inline-size:25ch}#panel-focus #focus-root.focus-os-v4 .focus-daily-thought p{font-size:12px}#panel-focus #focus-root.focus-os-v4 .focus-os-footer{flex-wrap:wrap;justify-content:center;gap:8px}#panel-focus #focus-root.focus-os-v4 .focus-tools{order:2}#panel-focus #focus-root.focus-os-v4 .focus-mode-dock{order:1}#panel-focus #focus-root.focus-os-v4 .focus-stage{gap:10px}#panel-focus #focus-root.focus-os-v4 .focus-quick-phase{font-size:12px;padding:8px}} @container focus-canvas (max-height:520px){#panel-focus #focus-root.focus-os-v4 .focus-stage{--focus-timer-size:clamp(42px,16cqh,88px);--focus-flip-size:clamp(24px,9cqh,42px);gap:6px;padding:0}#panel-focus #focus-root.focus-os-v4 .focus-studio-intention{font-size:16px;min-block-size:44px}#panel-focus #focus-root.focus-os-v4 .focus-timer-row{gap:8px}#panel-focus #focus-root.focus-os-v4 .focus-primary-controls>button{min-block-size:44px;inline-size:44px;min-inline-size:44px;border-radius:10px}#panel-focus #focus-root.focus-os-v4 .focus-daily-thought{display:none}#panel-focus #focus-root.focus-os-v4 .focus-desktop-clock{font-size:clamp(48px,13cqh,100px)}} @media(max-width:700px){#panel-focus #focus-root.focus-os-v4 .focus-tool-dialog{inline-size:calc(var(--focus-viewport-width,100vw) - 20px);block-size:calc(var(--focus-viewport-height,100dvh) - 24px);border-radius:16px}#panel-focus #focus-root.focus-os-v4 .focus-settings-drawer .focus-tool-dialog-body{grid-template-columns:54px minmax(0,1fr);gap:14px;padding-inline-end:14px}#panel-focus #focus-root.focus-os-v4 .focus-settings-nav{padding:0 4px 10px;gap:4px}#panel-focus #focus-root.focus-os-v4 .focus-settings-nav button{padding:8px;min-inline-size:44px;justify-content:center}#panel-focus #focus-root.focus-os-v4 .focus-settings-label{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}#panel-focus #focus-root.focus-os-v4 :is(.focus-theme-grid,.focus-style-previews,.focus-stats-cards){grid-template-columns:repeat(2,minmax(0,1fr))}#panel-focus #focus-root.focus-os-v4 .focus-floating-tool{inset:auto 10px 132px;inline-size:calc(var(--focus-viewport-width,100vw) - 20px);block-size:calc(var(--focus-viewport-height,100dvh) - 152px);max-block-size:570px}#panel-focus #focus-root.focus-os-v4 .focus-floating-tool[data-focus-tool=sound]{inline-size:calc(var(--focus-viewport-width,100vw) - 20px)}#panel-focus #focus-root.focus-os-v4 .focus-sound-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#panel-focus #focus-root.focus-os-v4 .focus-settings-footer{padding:12px 14px}} @media(max-width:420px){#panel-focus #focus-root.focus-os-v4{padding:16px}#panel-focus #focus-root.focus-os-v4 .focus-daily-thought{display:none}.focus-workspace-return strong{font-size:22px}#panel-focus #focus-root.focus-os-v4 .focus-studio-intention{font-size:18px}#panel-focus #focus-root.focus-os-v4 .focus-mode-dock{gap:0;padding:3px}#panel-focus #focus-root.focus-os-v4 .focus-tools{padding:3px}#panel-focus #focus-root.focus-os-v4 #focus-streak-open{min-inline-size:44px!important;padding:6px!important;gap:3px}#panel-focus #focus-root.focus-os-v4 #focus-streak-open .focus-icon{inline-size:16px}#panel-focus #focus-root.focus-os-v4 .focus-theme-grid{gap:8px}#panel-focus #focus-root.focus-os-v4 .focus-theme-preview{aspect-ratio:1.4;flex-wrap:wrap;padding:12px}#panel-focus #focus-root.focus-os-v4 .focus-theme-preview span{flex-basis:100%}#panel-focus #focus-root.focus-os-v4 .focus-stats-cards>div{padding:12px}#panel-focus #focus-root.focus-os-v4 .focus-tool-dialog-body{padding:14px}#panel-focus #focus-root.focus-os-v4 .focus-note-toolbar{gap:0}#panel-focus #focus-root.focus-os-v4 .focus-sound-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-height:480px) and (min-width:600px){#panel-focus #focus-root.focus-os-v4{padding:12px 24px}#panel-focus #focus-root.focus-os-v4 .focus-os-footer{padding-block-start:4px;min-block-size:48px;flex-wrap:nowrap;justify-content:space-between}#panel-focus #focus-root.focus-os-v4 .focus-tool-dialog{block-size:calc(var(--focus-viewport-height,100dvh) - 20px)}#panel-focus #focus-root.focus-os-v4 .focus-floating-tool{inset:10px auto 70px 20px;block-size:calc(var(--focus-viewport-height,100dvh) - 80px)}} /* Focus controls own their visual states, independently of workspace forms. */ #panel-focus #focus-root.focus-os-v4 [hidden]{display:none!important} #panel-focus #focus-root.focus-os-v4 :is(.focus-tools,.focus-mode-dock,.focus-primary-controls>button){background-image:linear-gradient(145deg,#ffffff14,#ffffff00 65%);box-shadow:inset 0 1px #ffffff24,0 8px 24px #14092524;transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease} #panel-focus #focus-root.focus-os-v4 .focus-primary-controls>button{border-radius:16px} #panel-focus #focus-root.focus-os-v4 :is(.focus-view-button[aria-pressed=true],.focus-tool[aria-expanded=true]){background:linear-gradient(145deg,#315c43,#254331);box-shadow:inset 0 1px #ffffff40,0 3px 14px #193f292e} #panel-focus #focus-root.focus-os-v4 .focus-primary-controls>button:disabled{background:#ffffff06!important;border:1px solid #ffffff18!important;color:#c4bdaf!important;opacity:.42!important;filter:none!important;box-shadow:none!important} #panel-focus #focus-root.focus-os-v4 :is(.focus-studio-intention,.focus-quick-phase):disabled{background:transparent!important;border:0!important;color:#fff!important;opacity:.65!important;filter:none!important} #panel-focus #focus-root.focus-os-v4 .focus-quick-phase[aria-pressed=true]:disabled{opacity:.9!important;box-shadow:inset 0 -2px #ffffffd9} #panel-focus #focus-root.focus-os-v4 .focus-studio-intention{letter-spacing:-.025em} #panel-focus #focus-root.focus-os-v4 .focus-time{letter-spacing:-.065em;text-shadow:0 3px 26px #21103238} #panel-focus #focus-root.focus-os-v4 :is(#focus-feedback,.focus-desktop-feedback,.focus-clear-dialog>.focus-feedback){position:relative;inset:auto;transform:none;flex:0 0 auto;inline-size:fit-content;max-inline-size:min(70ch,100%);padding:8px 14px;margin:8px auto 0;border:1px solid var(--focus-line);border-radius:12px;background:#181510f5;backdrop-filter:var(--focus-blur);box-shadow:inset 0 1px #ffffff12;font-size:12px;line-height:1.5;z-index:1;text-align:center;overflow-wrap:anywhere} #panel-focus #focus-root.focus-os-v4 [data-feedback-kind=success]{color:#f6f0e5} #panel-focus #focus-root.focus-os-v4 :is(#focus-feedback,.focus-desktop-feedback)[data-feedback-kind=warning]{border-color:#f6c59570;text-align:start;background:#211b13f5} #panel-focus #focus-root.focus-os-v4 .focus-tool-feedback{flex:0 0 auto;padding:10px 20px;margin:0;border-block-start:1px solid #ffffff12;background:#181510ed;color:#f6f0e5;font-size:12px;line-height:1.5;overflow-wrap:anywhere} #panel-focus #focus-root.focus-os-v4 .focus-tool-feedback[data-feedback-kind=warning]{color:#ffe0bc;background:#3b2b16ed} #panel-focus #focus-root.focus-os-v4:has(#focus-tool-dialog[open]) .focus-desktop-feedback,#panel-focus #focus-root.focus-os-v4:has(#focus-feedback:not(:empty)) .focus-desktop-feedback{display:none} #panel-focus #focus-root.focus-os-v4 .focus-studio-state[data-feedback-kind=warning]{color:#ffe0bc} #panel-focus #focus-root.focus-os-v4 .focus-settings-section{display:none} #panel-focus #focus-root.focus-os-v4 .focus-settings-drawer{position:fixed;inset-block:calc(var(--focus-viewport-top,0px) + 12px) auto;inset-inline:auto calc(var(--focus-viewport-inline-end,0px) + 12px);inline-size:min(820px,calc(var(--focus-viewport-width,100vw) - 40px));block-size:calc(var(--focus-viewport-height,100dvh) - 24px);max-block-size:calc(var(--focus-viewport-height,100dvh) - 24px);margin:0;border-radius:24px;background:linear-gradient(150deg,#211d16f5,#12100df5);box-shadow:inset 0 1px #ffffff18,0 24px 90px #14082666;backdrop-filter:blur(32px) saturate(130%)} #panel-focus #focus-root.focus-os-v4 .focus-settings-drawer .focus-tool-dialog-body{grid-template-columns:178px minmax(0,1fr);gap:20px 24px} #panel-focus #focus-root.focus-os-v4 .focus-settings-heading h2{font-size:28px;letter-spacing:-.035em} #panel-focus #focus-root.focus-os-v4 .focus-settings-nav .focus-studio-button{background:transparent;border:1px solid transparent;box-shadow:none;color:#f6f0e5} #panel-focus #focus-root.focus-os-v4 .focus-settings-nav .focus-studio-button[aria-current=page]{background:#9bc8a720;border-color:#9bc8a738;box-shadow:inset 0 1px #ffffff12;color:#fff} #panel-focus #focus-root.focus-os-v4 .focus-settings-nav .focus-icon{inline-size:20px;block-size:20px} #panel-focus #focus-root.focus-os-v4 .focus-settings-footer{background:#0c0a07e6;backdrop-filter:blur(18px);gap:12px} #panel-focus #focus-root.focus-os-v4 :is(.focus-theme-mode-switch,.focus-theme-categories,.focus-stats-periods) .focus-studio-button{background:#ffffff06;border:1px solid #ffffff12;color:#ddd5c7;box-shadow:none} #panel-focus #focus-root.focus-os-v4 :is(.focus-theme-mode-switch,.focus-theme-categories,.focus-stats-periods) .focus-studio-button[aria-pressed=true]{background:#9bc8a729;border-color:#9bc8a770;color:#fff;box-shadow:inset 0 1px #ffffff18} #panel-focus #focus-root.focus-os-v4 .focus-theme-mode-switch{inline-size:fit-content;padding:4px;background:#ffffff08;border:1px solid #ffffff16;border-radius:14px;gap:2px} #panel-focus #focus-root.focus-os-v4 .focus-theme-mode-switch .focus-studio-button{border:0;border-radius:10px} #panel-focus #focus-root.focus-os-v4 .focus-theme-preview{min-block-size:180px;aspect-ratio:2.2;flex-shrink:0;border:1px solid #ffffff20;border-radius:18px;box-shadow:inset 0 1px #ffffff20} #panel-focus #focus-root.focus-os-v4 .focus-theme-card{transition:border-color .18s,box-shadow .18s,transform .18s} #panel-focus #focus-root.focus-os-v4 .focus-theme-card:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #140a252e} #panel-focus #focus-root.focus-os-v4 .focus-tool-dialog :is(button:disabled,input:disabled,select:disabled){background:#ffffff06!important;border-color:#ffffff1c!important;color:#c4bdaf!important;opacity:.52!important;filter:none!important;box-shadow:none!important} #panel-focus #focus-root.focus-os-v4 .focus-floating-tool{inset-block:auto calc(var(--focus-viewport-bottom,0px) + 112px);inset-inline:calc(var(--focus-viewport-inline-start,0px) + 30px) auto;inline-size:min(480px,calc(var(--focus-viewport-width,100vw) - 48px));block-size:auto;max-block-size:min(560px,calc(var(--focus-viewport-height,100dvh) - 144px));background:linear-gradient(145deg,#211d16f0,#12100de8);border-radius:22px;box-shadow:inset 0 1px #ffffff24,0 18px 60px #1309224d} #panel-focus #focus-root.focus-os-v4 .focus-floating-tool .focus-tool-dialog-body{flex:1 1 auto;min-block-size:0;overflow:auto} #panel-focus #focus-root.focus-os-v4 .focus-floating-tool .focus-options-body{min-block-size:0;max-block-size:none;overflow:visible} #panel-focus #focus-root.focus-os-v4 .focus-floating-tool .focus-queue-row{border-radius:14px;padding:14px!important;background:#ffffff06;border-color:#ffffff18} #panel-focus #focus-root.focus-os-v4 .focus-floating-tool .focus-queue-title{font-weight:600;letter-spacing:-.01em} #panel-focus #focus-root.focus-os-v4 .focus-floating-tool .focus-caption{color:#d3cbbb} #panel-focus #focus-root.focus-os-v4 .focus-tool-dialog>.focus-notes-foot{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 20px;margin:0;border-block-start:1px solid #ffffff16;background:#181510ed;backdrop-filter:blur(18px)} #panel-focus #focus-root.focus-os-v4 .focus-notes-foot .focus-caption{margin:0} #panel-focus #focus-root.focus-os-v4 .focus-notes-foot button{margin:0!important} #panel-focus #focus-root.focus-os-v4 .focus-notes-foot #focus-save-notes{background:var(--focus-action);color:var(--focus-action-ink);border-color:transparent;font-weight:650;min-block-size:44px;margin-inline-start:auto!important} #panel-focus #focus-root.focus-os-v4 .focus-note-toolbar{flex-wrap:nowrap;gap:1px;padding:3px;background:#ffffff08;border:1px solid #ffffff16;overflow-x:auto;scrollbar-width:thin} #panel-focus #focus-root.focus-os-v4 .focus-note-toolbar button{flex-shrink:0} #panel-focus #focus-root.focus-os-v4 .focus-tool-dialog>.focus-note-toolbar{position:static;flex:0 0 auto;margin:6px 14px;border-radius:10px} #panel-focus #focus-root.focus-os-v4 .focus-floating-tool .focus-notes>h2{display:none} #panel-focus #focus-root.focus-os-v4 #focus-notes{block-size:clamp(130px,28dvh,240px);min-block-size:44px;max-block-size:360px;flex:0 0 auto;box-sizing:border-box;background:#0c0a0794;line-height:1.75} @media(max-width:700px){ #panel-focus #focus-root.focus-os-v4 #focus-desktop-fullscreen{display:none!important} #panel-focus #focus-root.focus-os-v4 .focus-mode-dock{gap:1px;padding:4px;max-inline-size:100%} #panel-focus #focus-root.focus-os-v4 .focus-settings-drawer{inset-block:calc(var(--focus-viewport-top,0px) + 10px) auto;inset-inline:calc(var(--focus-viewport-inline-start,0px) + 10px) auto;inline-size:calc(var(--focus-viewport-width,100vw) - 20px);block-size:calc(var(--focus-viewport-height,100dvh) - 20px);border-radius:20px} #panel-focus #focus-root.focus-os-v4 .focus-settings-drawer .focus-tool-dialog-body{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);gap:12px;padding:0 16px} #panel-focus #focus-root.focus-os-v4 .focus-settings-drawer .focus-settings-nav{display:none!important} #panel-focus #focus-root.focus-os-v4 .focus-settings-section:not([hidden]){display:block;grid-column:1;grid-row:1;margin-block:4px 0;min-block-size:44px} #panel-focus #focus-root.focus-os-v4 .focus-settings-heading{grid-column:1;grid-row:2;padding:0} #panel-focus #focus-root.focus-os-v4 .focus-settings-heading h2{font-size:24px} #panel-focus #focus-root.focus-os-v4 .focus-settings-drawer .focus-desktop-utilities{grid-column:1;grid-row:3;padding:0 4px 20px} #panel-focus #focus-root.focus-os-v4 .focus-floating-tool{inset-block:auto calc(var(--focus-viewport-bottom,0px) + 144px);inset-inline:calc(var(--focus-viewport-inline-start,0px) + 10px) auto;inline-size:calc(var(--focus-viewport-width,100vw) - 20px);max-block-size:calc(var(--focus-viewport-height,100dvh) - 164px);block-size:auto} #panel-focus #focus-root.focus-os-v4 .focus-floating-tool[data-focus-tool=sound]{inline-size:calc(var(--focus-viewport-width,100vw) - 20px)} #panel-focus #focus-root.focus-os-v4 :is(#focus-feedback,.focus-desktop-feedback){margin-block-start:6px} #panel-focus #focus-root.focus-os-v4 .focus-note-toolbar button{inline-size:44px;min-inline-size:44px!important;padding:6px!important} } @media(max-height:480px) and (min-width:600px){ #panel-focus #focus-root.focus-os-v4 .focus-floating-tool{inset-block:calc(var(--focus-viewport-top,0px) + 10px) auto;inset-inline:calc(var(--focus-viewport-inline-start,0px) + 16px) auto;block-size:calc(var(--focus-viewport-height,100dvh) - 86px);max-block-size:calc(var(--focus-viewport-height,100dvh) - 86px)} #panel-focus #focus-root.focus-os-v4 .focus-theme-preview{min-block-size:140px} } @media(max-height:480px){ #panel-focus #focus-root.focus-os-v4 .focus-floating-tool[data-focus-tool=notes] .focus-tool-dialog-body{min-block-size:44px} #panel-focus #focus-root.focus-os-v4 .focus-notes-foot :is(.focus-caption,.focus-note-characters){display:none} #panel-focus #focus-root.focus-os-v4 .focus-floating-tool[data-focus-tool=notes]{inset-block:calc(var(--focus-viewport-top,0px) + 8px) auto;inset-inline:calc(var(--focus-viewport-inline-start,0px) + 8px) auto;inline-size:calc(var(--focus-viewport-width,100vw) - 16px);block-size:calc(var(--focus-viewport-height,100dvh) - 16px);max-block-size:calc(var(--focus-viewport-height,100dvh) - 16px)} #panel-focus #focus-root.focus-os-v4 .focus-floating-tool[data-focus-tool=notes] .focus-tool-dialog-body{padding:0 14px} #panel-focus #focus-root.focus-os-v4 .focus-notes .focus-field{margin:0;gap:0} #panel-focus #focus-root.focus-os-v4 .focus-notes .focus-field>span{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} #panel-focus #focus-root.focus-os-v4 #focus-notes{block-size:clamp(44px,calc(var(--focus-viewport-height,100dvh) - 300px),64px);min-block-size:44px;resize:none} } @media(max-height:360px){ #panel-focus #focus-root.focus-os-v4 .focus-floating-tool{inset-block:calc(var(--focus-viewport-top,0px) + 8px) auto;inset-inline:calc(var(--focus-viewport-inline-start,0px) + 8px) auto;inline-size:calc(var(--focus-viewport-width,100vw) - 16px);block-size:calc(var(--focus-viewport-height,100dvh) - 16px);max-block-size:calc(var(--focus-viewport-height,100dvh) - 16px)} #panel-focus #focus-root.focus-os-v4 .focus-tool-feedback{max-block-size:30px;min-block-size:0;box-sizing:border-box;overflow:auto;margin-block:0;padding:4px 14px} #panel-focus #focus-root.focus-os-v4 .focus-floating-tool[data-focus-tool=notes] .focus-tool-dialog-body{padding:0 14px} #panel-focus #focus-root.focus-os-v4 .focus-floating-tool .focus-notes>h2{display:none} #panel-focus #focus-root.focus-os-v4 .focus-floating-tool .focus-tool-dialog-heading{padding:8px 14px} #panel-focus #focus-root.focus-os-v4 .focus-tool-dialog>.focus-note-toolbar{margin:2px 14px} #panel-focus #focus-root.focus-os-v4 .focus-tool-dialog>.focus-notes-foot{padding:8px 14px} } /* Short keyboard viewports preserve the same editor and one content scroller. Close, formatting and Save stay outside the editor's scroll region. */ @container focus-canvas (max-height:480px){ #panel-focus #focus-root.focus-os-v4 .focus-floating-tool[data-focus-tool=notes]{inset-block:calc(var(--focus-viewport-top,0px) + 8px) auto;inset-inline:calc(var(--focus-viewport-inline-start,0px) + 8px) auto;inline-size:calc(var(--focus-viewport-width,100vw) - 16px);block-size:calc(var(--focus-viewport-height,100dvh) - 16px);max-block-size:calc(var(--focus-viewport-height,100dvh) - 16px)} #panel-focus #focus-root.focus-os-v4 .focus-floating-tool[data-focus-tool=notes] .focus-tool-dialog-body{min-block-size:0} #panel-focus #focus-root.focus-os-v4 .focus-notes-foot :is(.focus-caption,.focus-note-characters){display:none} #panel-focus #focus-root.focus-os-v4 #focus-notes{block-size:clamp(44px,calc(var(--focus-viewport-height,100dvh) - 280px),100px);min-block-size:44px;resize:none} } @container focus-canvas (max-height:360px){ #panel-focus #focus-root.focus-os-v4 .focus-floating-tool{inset-block:calc(var(--focus-viewport-top,0px) + 8px) auto;inset-inline:calc(var(--focus-viewport-inline-start,0px) + 8px) auto;inline-size:calc(var(--focus-viewport-width,100vw) - 16px);block-size:calc(var(--focus-viewport-height,100dvh) - 16px);max-block-size:calc(var(--focus-viewport-height,100dvh) - 16px)} #panel-focus #focus-root.focus-os-v4 .focus-tool-feedback{max-block-size:44px;min-block-size:0;overflow:auto;padding:4px 14px} #panel-focus #focus-root.focus-os-v4 .focus-tool-dialog>.focus-note-toolbar{margin:2px 14px} #panel-focus #focus-root.focus-os-v4 .focus-tool-dialog>.focus-notes-foot{padding:8px 14px} } @media(prefers-reduced-motion:reduce){#panel-focus #focus-root.focus-os-v4 *,#panel-focus #focus-root.focus-os-v4::before{animation:none!important;transition:none!important;scroll-behavior:auto!important}} @media(prefers-reduced-transparency:reduce),(prefers-contrast:more){#panel-focus #focus-root.focus-os-v4{--focus-glass:#181510;--focus-glass-hover:#332d22;--focus-blur:none}#panel-focus #focus-root.focus-os-v4 :is(.focus-tool-dialog,.focus-settings-footer,.focus-toolbar-menu){background:#181510;backdrop-filter:none}} html[data-transparency=reduce] #panel-focus #focus-root.focus-os-v4{--focus-glass:#181510;--focus-blur:none}html[data-transparency=reduce] #panel-focus #focus-root.focus-os-v4 .focus-tool-dialog{background:#181510;backdrop-filter:none} @media(forced-colors:active){#panel-focus #focus-root.focus-os-v4{--text:CanvasText!important;--muted:CanvasText!important;--border:CanvasText!important;--input:Canvas!important;--card:Canvas!important;--row:Canvas!important;--focus-glass:Canvas!important;--focus-blur:none!important;--focus-surface:Canvas!important;--focus-surface-solid:Canvas!important;--focus-surface-raised:Canvas!important;--focus-action:ButtonFace!important;--focus-action-ink:ButtonText!important;--focus-focus-ring:Highlight!important;color:CanvasText!important;background:Canvas!important}#panel-focus #focus-root.focus-os-v4::before,#panel-focus #focus-root.focus-os-v4::after,.focus-background-video{display:none}#panel-focus #focus-root.focus-os-v4 :is(.focus-tool-dialog,.focus-settings-footer,.focus-toolbar-menu){background:Canvas;color:CanvasText;border-color:CanvasText}#panel-focus #focus-root.focus-os-v4 :is(button,summary,.focus-time,.focus-desktop-clock,.focus-studio-intention,#focus-desktop-greeting){color:CanvasText;forced-color-adjust:auto}#panel-focus #focus-root.focus-os-v4 :focus-visible{outline-color:Highlight}} @media(forced-colors:active){#panel-focus #focus-root.focus-os-v4 .focus-icon{filter:brightness(0)}} @media(forced-colors:active) and (prefers-color-scheme:dark){#panel-focus #focus-root.focus-os-v4 .focus-icon{filter:brightness(0) invert(1)}} @media(forced-colors:active){ #panel-focus #focus-root.focus-os-v4{forced-color-adjust:auto} #panel-focus #focus-root.focus-os-v4 :is(.focus-settings-intro,.focus-caption,.focus-studio-field,.focus-field,.focus-tool-feedback,.focus-studio-state,.focus-estimated-end,.focus-note-characters){color:CanvasText!important;forced-color-adjust:auto} #panel-focus #focus-root.focus-os-v4 :is(.focus-settings-drawer,.focus-floating-tool,.focus-tool-feedback,.focus-note-toolbar,.focus-notes-foot){background:Canvas;box-shadow:none;border-color:CanvasText} } /* Original scene motion stays behind the workspace and pauses when hidden. */ #panel-focus #focus-root.focus-os-v4 .focus-atmosphere{position:absolute;inset:0;z-index:-1;overflow:clip;pointer-events:none;contain:strict} #panel-focus #focus-root.focus-os-v4 .focus-atmosphere>span{position:absolute;inset:0;display:none} #panel-focus #focus-root.focus-os-v4[data-scene-effect=clouds] .focus-atmosphere-clouds{display:block;background:radial-gradient(ellipse at 8% 26%,#eae3ff2e,transparent 35%),radial-gradient(ellipse at 95% 65%,#f9d9dd38,transparent 40%);inset:-10%;animation:focus-cloud-sail 36s ease-in-out infinite alternate;mix-blend-mode:screen} #panel-focus #focus-root.focus-os-v4[data-scene-effect=aurora] .focus-atmosphere-glow{display:block;background:radial-gradient(ellipse at 20% 30%,#e4adff38,transparent 45%),radial-gradient(ellipse at 80% 75%,#9bdddf26,transparent 50%);inset:-15%;animation:focus-aurora 26s ease-in-out infinite alternate;mix-blend-mode:screen} #panel-focus #focus-root.focus-os-v4[data-scene-effect=rain] .focus-atmosphere-rain{display:block;inset:-70%;background:repeating-linear-gradient(105deg,transparent 0 39px,#dce8ff24 40px,transparent 41px 69px);transform:rotate(-8deg);animation:focus-rainfall 1.8s linear infinite;opacity:.3} #panel-focus #focus-root.focus-os-v4:is([data-scene-effect=fireflies],[data-scene-effect=stars],[data-scene-effect=dust]) .focus-atmosphere-particles{display:block} #panel-focus #focus-root.focus-os-v4 .focus-atmosphere-particles i{position:absolute;left:var(--particle-x);top:var(--particle-y);inline-size:3px;block-size:3px;border-radius:50%;background:#fff8df;box-shadow:0 0 10px 3px #ffe0a725;animation:focus-firefly var(--particle-duration) ease-in-out var(--particle-delay) infinite alternate;opacity:.35} #panel-focus #focus-root.focus-os-v4[data-scene-effect=stars] .focus-atmosphere-particles i{inline-size:2px;block-size:2px;background:#e8e7ff;animation-name:focus-starlight} #panel-focus #focus-root.focus-os-v4[data-scene-effect=dust] .focus-atmosphere-particles i{inline-size:2px;block-size:2px;box-shadow:none;background:#fff0c2;animation-name:focus-dust} @keyframes focus-cloud-sail{from{transform:translate3d(-4%,1%,0) scale(1)}to{transform:translate3d(4%,-2%,0) scale(1.1)}} @keyframes focus-aurora{from{transform:translate3d(-3%,-1%,0) rotate(-6deg);opacity:.35}to{transform:translate3d(3%,2%,0) rotate(6deg);opacity:.8}} @keyframes focus-rainfall{from{background-position:0 -240px}to{background-position:-40px 240px}} @keyframes focus-firefly{0%{transform:translate3d(-12px,10px,0);opacity:.15}70%{opacity:.7}100%{transform:translate3d(20px,-25px,0);opacity:.2}} @keyframes focus-starlight{from{opacity:.1;transform:scale(.6)}to{opacity:.8;transform:scale(1.1)}} @keyframes focus-dust{from{transform:translate3d(-18px,12px,0);opacity:.1}to{transform:translate3d(35px,-30px,0);opacity:.35}} #panel-focus #focus-root.focus-os-v4[data-motion-enabled=true] :is(.focus-tool,.focus-view-button,.focus-studio-button,.focus-studio-intention){transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease} #panel-focus #focus-root.focus-os-v4[data-motion-enabled=true] :is(.focus-tool,.focus-view-button,.focus-studio-button):active{transform:scale(.95)} #panel-focus #focus-root.focus-os-v4[data-motion-enabled=true] .focus-tool-dialog[open]{animation:focus-panel-enter .22s cubic-bezier(.2,.8,.2,1)} @keyframes focus-panel-enter{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}} #panel-focus #focus-root.focus-os-v4 .focus-celebration{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:clip} #panel-focus #focus-root.focus-os-v4 .focus-celebration i{position:absolute;left:var(--confetti-x);top:25%;inline-size:6px;block-size:10px;background:var(--confetti-color);border-radius:2px;opacity:0;animation:focus-confetti 1.5s ease-out var(--confetti-delay) both} @keyframes focus-confetti{0%{transform:translate3d(0,-20px,0) rotate(0);opacity:0}15%{opacity:.85}100%{transform:translate3d(var(--confetti-drift),160px,0) rotate(300deg);opacity:0}} #panel-focus #focus-root.focus-os-v4 .focus-flip-number{background:var(--focus-flip-bg,#382746df);color:var(--focus-flip-ink,#fff);box-shadow:inset 0 1px #ffffff25,0 4px 12px #0002;transform-origin:50% 50%;backface-visibility:hidden} #panel-focus #focus-root.focus-os-v4[data-flip-palette=mint]{--focus-flip-bg:#d6f0e2ef;--focus-flip-ink:#123c31} #panel-focus #focus-root.focus-os-v4[data-flip-palette=peach]{--focus-flip-bg:#ffd9c4ef;--focus-flip-ink:#512b2c} #panel-focus #focus-root.focus-os-v4[data-flip-palette=rose]{--focus-flip-bg:#f2c5d7ef;--focus-flip-ink:#4c1934} #panel-focus #focus-root.focus-os-v4[data-flip-palette=sky]{--focus-flip-bg:#c8e4f7ef;--focus-flip-ink:#163749} #panel-focus #focus-root.focus-os-v4[data-flip-palette=amber]{--focus-flip-bg:#efdaa7ef;--focus-flip-ink:#443216} #panel-focus #focus-root.focus-os-v4[data-flip-palette=ink]{--focus-flip-bg:#201c2bef;--focus-flip-ink:#ece3fd} #panel-focus #focus-root.focus-os-v4[data-flip-palette=paper]{--focus-flip-bg:#f4efe7ef;--focus-flip-ink:#332e37} #panel-focus #focus-root.focus-os-v4[data-flip-palette=midnight]{--focus-flip-bg:#172a42ef;--focus-flip-ink:#d5e7ff} #panel-focus #focus-root.focus-os-v4 .focus-work-plan{padding:16px;border:1px solid #ffffff25;border-radius:16px;background:linear-gradient(130deg,#b78ee91b,#8bddbb0e);margin-block:12px 18px} #panel-focus #focus-root.focus-os-v4 .focus-work-plan h3{margin:0 0 12px;font-size:15px;color:#fff} #panel-focus #focus-root.focus-os-v4 .focus-plan-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0} #panel-focus #focus-root.focus-os-v4 .focus-plan-metrics dt{font-size:11px;line-height:1.4;color:#ddd5c7} #panel-focus #focus-root.focus-os-v4 .focus-plan-metrics dd{margin:5px 0 0;font-size:20px;font-weight:600;line-height:1.35;overflow-wrap:anywhere;color:#fff} #panel-focus #focus-root.focus-os-v4 .focus-work-plan .focus-studio-check{margin-block:8px 0;min-block-size:44px} #panel-focus #focus-root.focus-os-v4 .focus-task-plan{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding-block:3px;color:#ddd5c7;font-size:12px;line-height:1.5} #panel-focus #focus-root.focus-os-v4 .focus-task-plan progress{appearance:none;inline-size:72px;block-size:5px;border:0;border-radius:3px;overflow:hidden;flex:0 0 auto;background:#ffffff1a} #panel-focus #focus-root.focus-os-v4 .focus-task-plan progress::-webkit-progress-bar{background:#ffffff1a} #panel-focus #focus-root.focus-os-v4 .focus-task-plan progress::-webkit-progress-value{background:#cbb0ee;border-radius:3px} #panel-focus #focus-root.focus-os-v4 .focus-task-plan progress::-moz-progress-bar{background:#cbb0ee;border-radius:3px} @media(max-width:420px){#panel-focus #focus-root.focus-os-v4 .focus-plan-metrics{gap:8px}#panel-focus #focus-root.focus-os-v4 .focus-plan-metrics dd{font-size:16px}#panel-focus #focus-root.focus-os-v4 .focus-work-plan{padding:12px}} @media(prefers-reduced-motion:reduce){#panel-focus #focus-root.focus-os-v4 .focus-atmosphere,#panel-focus #focus-root.focus-os-v4 .focus-celebration{display:none!important}} @media(forced-colors:active){#panel-focus #focus-root.focus-os-v4 .focus-atmosphere,#panel-focus #focus-root.focus-os-v4 .focus-celebration{display:none}#panel-focus #focus-root.focus-os-v4 :is(.focus-flip-number,.focus-work-plan){color:CanvasText!important;background:Canvas!important;border-color:CanvasText!important}#panel-focus #focus-root.focus-os-v4 .focus-plan-metrics :is(dt,dd),#panel-focus #focus-root.focus-os-v4 .focus-task-plan{color:CanvasText!important}} /* Sarab type and Oasis accents on the scenic stage. Fonts are the homepage files. */ @font-face{font-family:"Instrument Sans";src:url("/_next/static/media/f06bf9da926bae75-s.p.2874ccu1_u7jf.woff2") format("woff2");font-style:normal;font-weight:400 700;font-display:swap;unicode-range:U+0020-00FF,U+0102,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+0300-0304,U+0308,U+2013-2014,U+2018-201E,U+2022,U+2026,U+2039-203A,U+20AC,U+2122,U+2191,U+2193,U+2212} @font-face{font-family:"Instrument Serif";src:url("/_next/static/media/e41d5df559864f9e-s.p.1g73gv09-xcb6.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap} @font-face{font-family:"IBM Plex Mono";src:url("/_next/static/media/99e609270109b47d-s.p.40sczeszzbjw1.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap} #panel-focus #focus-root.focus-os-v4{--focus-action:#00d492;--focus-action-ink:#0c0a07;--focus-accent:#00d492;--focus-display:"Instrument Serif",Georgia,"IBM Plex Sans Arabic",serif;--focus-ui:"Instrument Sans","IBM Plex Sans Arabic",var(--font,Arial),sans-serif;--focus-mono:"IBM Plex Mono",ui-monospace,monospace;font-family:var(--focus-ui)} html[lang="ar"] #panel-focus #focus-root.focus-os-v4{--focus-ui:"IBM Plex Sans Arabic","Instrument Sans",var(--font,Arial),sans-serif;--focus-display:"IBM Plex Sans Arabic","Instrument Serif",Georgia,serif;--focus-mono:"IBM Plex Sans Arabic","IBM Plex Mono",ui-monospace,monospace} #panel-focus #focus-root.focus-os-v4 :is(.focus-time,.focus-desktop-clock,.focus-ambient-time,.focus-workspace-return strong,.focus-settings-heading h2,.focus-daily-thought p,#focus-desktop-greeting){font-family:var(--focus-display);font-weight:400} #panel-focus #focus-root.focus-os-v4 .focus-daily-thought p{font-style:italic} #panel-focus #focus-root.focus-os-v4 :is(.focus-caption,.focus-studio-state,.focus-note-characters,.focus-settings-intro,.focus-widget-eyebrow){font-family:var(--focus-mono);font-size:12px;letter-spacing:.02em} #panel-focus #focus-root.focus-os-v4 .focus-stage{position:relative} #panel-focus #focus-root.focus-os-v4 .focus-stage::before{content:"";position:absolute;z-index:-1;inset:-8% -6%;pointer-events:none;background:radial-gradient(ellipse at center,rgb(12 10 7 / .22),transparent 64%)} #panel-focus #focus-root.focus-os-v4 .focus-studio-intention{min-block-size:44px!important;min-inline-size:44px;display:inline-flex;align-items:center;justify-content:center} #panel-focus #focus-root.focus-os-v4 .focus-quick-phase[aria-pressed=true],#panel-focus #focus-root.focus-os-v4 .focus-quick-phase[aria-pressed=true]:disabled{box-shadow:inset 0 -2px #00d492!important;color:#f3f0e9} #panel-focus #focus-root.focus-os-v4 :is(.focus-view-button[aria-pressed=true],.focus-tool[aria-expanded=true]){background:#00d492!important;color:#0c0a07!important;box-shadow:0 0 18px rgb(0 212 146 / .28),inset 0 1px #ffffff66!important} #panel-focus #focus-root.focus-os-v4 :is(.focus-view-button[aria-pressed=true],.focus-tool[aria-expanded=true]) .focus-icon{filter:brightness(0)} #panel-focus #focus-root.focus-os-v4 :is(.focus-tools,.focus-mode-dock,.focus-ambient-session,.focus-primary-controls>button){background-color:rgb(12 10 7 / .58);border-color:#f3f0e92e} #panel-focus #focus-root.focus-os-v4 .focus-ambient-session button{min-inline-size:44px!important;min-block-size:44px!important;padding:10px!important} #panel-focus #focus-root.focus-os-v4 .focus-note-toolbar>button,#panel-focus #focus-root.focus-os-v4 .focus-stats-calendar>button,#panel-focus #focus-root.focus-os-v4 .focus-stats-surface button{min-inline-size:44px!important;min-block-size:44px!important} #panel-focus #focus-root.focus-os-v4 .focus-settings-card{border:1px solid #f3f0e91f;border-radius:18px;padding:18px;margin-block:0 14px;background:rgb(12 10 7 / .35)} #panel-focus #focus-root.focus-os-v4 .focus-settings-drawer,#panel-focus #focus-root.focus-os-v4 .focus-floating-tool{background:linear-gradient(160deg,rgb(21 18 13 / .94),rgb(12 10 7 / .92))} #panel-focus #focus-root.focus-os-v4 .focus-tool-dialog input[type=range]{accent-color:#00d492} #panel-focus #focus-root.focus-os-v4 .focus-calendar-cell[data-level="1"]{background:#176347} #panel-focus #focus-root.focus-os-v4 .focus-calendar-cell[data-level="2"]{background:#0f8f68} #panel-focus #focus-root.focus-os-v4 .focus-calendar-cell[data-level="3"]{background:#00d492} #panel-focus #focus-root.focus-os-v4 .focus-calendar-cell[data-level="4"]{background:#9bc8a7} #panel-focus #focus-root.focus-os-v4 .focus-stats-trend progress,#panel-focus #focus-root.focus-os-v4 .focus-stats-trend progress::-webkit-progress-bar,#panel-focus #focus-root.focus-os-v4 .focus-stats-trend progress::-webkit-progress-value{background:#00d492} #panel-focus #focus-root.focus-os-v4 .focus-task-plan progress::-webkit-progress-value,#panel-focus #focus-root.focus-os-v4 .focus-task-plan progress::-moz-progress-bar{background:#00d492} #panel-focus #focus-root.focus-os-v4:not([data-flip-palette]),#panel-focus #focus-root.focus-os-v4[data-flip-palette=violet]{--focus-flip-bg:#15120df2;--focus-flip-ink:#f3f0e9} #panel-focus #focus-root.focus-os-v4 a{color:#9bc8a7} @supports not ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))){#panel-focus #focus-root.focus-os-v4 :is(.focus-tools,.focus-mode-dock,.focus-primary-controls>button,.focus-ambient-session,.focus-tool-dialog,.focus-settings-drawer,.focus-floating-tool){background:#15120df2;backdrop-filter:none;-webkit-backdrop-filter:none}} @media(prefers-reduced-motion:reduce){#panel-focus #focus-root.focus-os-v4 .focus-stage::before{animation:none!important}} @media(forced-colors:active){#panel-focus #focus-root.focus-os-v4 :is(.focus-view-button[aria-pressed=true],.focus-tool[aria-expanded=true]){background:ButtonFace!important;color:ButtonText!important;box-shadow:none!important}#panel-focus #focus-root.focus-os-v4 :is(.focus-view-button[aria-pressed=true],.focus-tool[aria-expanded=true]) .focus-icon{filter:brightness(0)}#panel-focus #focus-root.focus-os-v4 .focus-quick-phase[aria-pressed=true]{box-shadow:inset 0 -2px CanvasText!important;color:CanvasText}} @media(forced-colors:active) and (prefers-color-scheme:dark){#panel-focus #focus-root.focus-os-v4 :is(.focus-view-button[aria-pressed=true],.focus-tool[aria-expanded=true]) .focus-icon{filter:brightness(0) invert(1)}} /* Scenic stage matches the reference composition: bright photograph, centered type, frosted docks and sheets. */ #panel-focus #focus-root.focus-os-v4 .focus-workspace-return strong{font-size:clamp(28px,3vw,40px);font-weight:400;letter-spacing:-.03em;color:#f7f5ee} #panel-focus #focus-root.focus-os-v4 .focus-daily-thought p{font-weight:400;color:#f7f5ee;text-shadow:0 2px 14px rgb(12 10 7 / .4)} #panel-focus #focus-root.focus-os-v4 .focus-studio-intention{font-weight:500;letter-spacing:0;color:#f7f5ee;text-shadow:0 2px 18px rgb(12 10 7 / .4)} #panel-focus #focus-root.focus-os-v4 .focus-quick-phase{letter-spacing:.12em;font-weight:500;font-size:13px;color:#f3f0e9c7} #panel-focus #focus-root.focus-os-v4 .focus-time{letter-spacing:-.045em;text-shadow:0 10px 36px rgb(12 10 7 / .38)} #panel-focus #focus-root.focus-os-v4 :is(.focus-tools,.focus-mode-dock){border-radius:22px;background-color:rgb(12 10 7 / .46);box-shadow:inset 0 1px #ffffff2e,0 12px 32px rgb(12 10 7 / .28)} #panel-focus #focus-root.focus-os-v4 .focus-primary-controls>button{border-radius:14px;background-color:rgb(12 10 7 / .55)} #panel-focus #focus-root.focus-os-v4 .focus-primary-controls>button:disabled{opacity:.78!important;color:#f3f0e9!important} #panel-focus #focus-root.focus-os-v4 .focus-settings-drawer{position:fixed;box-sizing:border-box;inset-block:0;inset-inline:auto 0;margin:0;inline-size:min(1040px,calc(100vw - 72px));block-size:auto;max-block-size:none;overflow:hidden;border-radius:0;border:0;border-inline-start:1px solid #f3f0e924;background:linear-gradient(180deg,rgb(12 10 7 / .92),rgb(21 18 13 / .88));backdrop-filter:blur(28px) saturate(120%);box-shadow:-24px 0 60px rgb(12 10 7 / .28)} #panel-focus #focus-root.focus-os-v4 .focus-settings-drawer .focus-desktop-utilities{min-block-size:0;overflow:auto} #panel-focus #focus-root.focus-os-v4 .focus-priority-menu-body{inset-block-start:auto;inset-block-end:48px;z-index:5;max-block-size:min(320px,60dvh);overflow:auto} /* Keep rounding and decorative effects from giving the fullscreen canvas a horizontal pan. */ html .workspace-framed #panel-focus #focus-root.focus-os-v4,#panel-focus #focus-root.focus-os-v4{overflow-x:hidden} /* Show names on the primary Focus entry and tool dock for touch discovery. */ #panel-focus #focus-root.focus-os-v4 :is(#focus-view-focus,.focus-tools button) .focus-visually-hidden{position:static!important;inline-size:auto!important;block-size:auto!important;margin:0;overflow:visible!important;clip-path:none;clip:auto;white-space:normal;font:500 12px/1.3 var(--focus-ui)} #panel-focus #focus-root.focus-os-v4 :is(#focus-view-focus,.focus-tools button){inline-size:auto!important;gap:6px;padding-inline:10px!important} /* Phase names retain contrast even over a bright custom photo. */ #panel-focus #focus-root.focus-os-v4 .focus-quick-phases{background:#0c0a07e6;border-radius:12px;padding:2px} @media(forced-colors:active){#panel-focus #focus-root.focus-os-v4 .focus-quick-phases{background:Canvas}} #panel-focus #focus-root.focus-os-v4 .focus-floating-tool:not(.focus-sound-sheet){inset:auto auto 108px 28px;border-radius:22px;border:1px solid #f3f0e92e;background:linear-gradient(165deg,rgb(21 18 13 / .86),rgb(12 10 7 / .78));backdrop-filter:blur(22px) saturate(130%);box-shadow:0 22px 60px rgb(12 10 7 / .4)} @media(max-width:700px){#panel-focus #focus-root.focus-os-v4 .focus-settings-drawer{inset-inline:0;inline-size:100vw}#panel-focus #focus-root.focus-os-v4 .focus-floating-tool:not(.focus-sound-sheet){inset:auto 10px 132px;inline-size:calc(var(--focus-viewport-width,100vw) - 20px)}} @media(max-height:480px) and (min-width:600px){#panel-focus #focus-root.focus-os-v4 .focus-floating-tool:not(.focus-sound-sheet){inset:10px auto 70px 20px;block-size:calc(var(--focus-viewport-height,100dvh) - 80px)}} @media(forced-colors:active){#panel-focus #focus-root.focus-os-v4 :is(.focus-settings-drawer,.focus-floating-tool,.focus-tool-dialog){background:Canvas!important;color:CanvasText!important;box-shadow:none!important}} .focus-workspace-return{max-inline-size:100%;text-decoration:none;gap:8px} #panel-focus #focus-root.focus-os-v4 #focus-workspace-return .focus-workspace-return-label{display:inline!important;position:static!important;inline-size:auto!important;block-size:auto!important;clip-path:none!important;white-space:normal!important;font-size:14px;line-height:1.5;font-weight:500} .focus-workspace-back-icon{inline-size:20px;block-size:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} [dir=rtl] .focus-workspace-back-icon{transform:scaleX(-1)} /* Settings keep the preview, save outcome and next action easy to scan. */ #panel-focus #focus-root.focus-os-v4 .focus-save-hint{padding:12px 14px;border-inline-start:3px solid var(--focus-action);border-radius:8px;background:var(--focus-surface-muted);color:var(--text)} #panel-focus #focus-root.focus-os-v4 .focus-photo-credit{display:inline-flex;align-items:center;min-block-size:44px;font-size:12px;line-height:1.6;color:var(--muted);text-underline-offset:4px;margin-block-end:8px} #panel-focus #focus-root.focus-os-v4 .focus-photo-credit[hidden]{display:none} #panel-focus #focus-root.focus-os-v4 .focus-theme-card[aria-pressed=true]{outline:3px solid var(--focus-action);outline-offset:2px;background:var(--focus-surface-muted)} #panel-focus #focus-root.focus-os-v4 .focus-preset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} #panel-focus #focus-root.focus-os-v4 .focus-preset-card{min-block-size:66px;text-align:start;padding:14px;font-weight:600;line-height:1.5;white-space:normal;overflow-wrap:anywhere;background:var(--focus-surface-muted);border:1px solid var(--focus-line);border-radius:12px} #panel-focus #focus-root.focus-os-v4 .focus-preset-card[aria-pressed=true]{border-color:var(--focus-action);box-shadow:inset 0 0 0 1px var(--focus-action);color:var(--focus-action)} #panel-focus #focus-root.focus-os-v4 .focus-settings-footer{background:var(--focus-surface-solid);backdrop-filter:none} #panel-focus #focus-root.focus-os-v4 .focus-studio-state{flex:1 1 180px;line-height:1.6} #panel-focus #focus-root.focus-os-v4 .focus-studio-state[data-feedback-kind=success]{color:var(--focus-action)} #panel-focus #focus-root.focus-os-v4 .focus-studio-state[data-feedback-kind=warning]{color:var(--focus-accent)} #panel-focus #focus-root.focus-os-v4 .focus-tool-dialog :is(input,select,textarea):focus-visible{outline-width:3px} #panel-focus #focus-root.focus-os-v4[data-scene-effect=breeze] .focus-atmosphere-glow{display:block;background:radial-gradient(ellipse at 15% 0%,color-mix(in srgb,var(--focus-accent) 16%,transparent),transparent 65%);animation:focus-canopy-light 24s ease-in-out infinite alternate;transform-origin:top left} @keyframes focus-canopy-light{from{opacity:.3;transform:translateX(-3%)}to{opacity:.75;transform:translateX(3%)}} @media(max-width:700px){ #panel-focus #focus-root.focus-os-v4 .focus-tool-dialog{background:var(--focus-surface-solid);backdrop-filter:none} #panel-focus #focus-root.focus-os-v4 .focus-settings-footer{gap:8px;padding-block:10px max(10px,env(safe-area-inset-bottom))} #panel-focus #focus-root.focus-os-v4 .focus-studio-state{flex-basis:100%;font-size:12px} #panel-focus #focus-root.focus-os-v4 .focus-studio-state:empty{display:none} #panel-focus #focus-root.focus-os-v4 #focus-studio-save{flex:1} #panel-focus #focus-root.focus-os-v4 .focus-preset-card{padding:12px;font-size:13px} } /* The preview's minimum height must not impose an aspect-ratio width on a phone. */ #panel-focus #focus-root.focus-os-v4 .focus-theme-preview{box-sizing:border-box;inline-size:100%;min-inline-size:0;max-inline-size:100%} #panel-focus #focus-root.focus-os-v4 :is(.focus-save-hint,.focus-settings-intro,.focus-studio-state){font-family:var(--focus-ui);letter-spacing:normal;font-size:13px} #panel-focus #focus-root.focus-os-v4 .focus-theme-preview button{background:var(--focus-surface-solid)} @media(max-width:700px){ #panel-focus #focus-root.focus-os-v4 .focus-theme-preview{aspect-ratio:auto;min-block-size:160px;flex-wrap:wrap} #panel-focus #focus-root.focus-os-v4 .focus-theme-preview span{flex-basis:100%} #panel-focus #focus-root.focus-os-v4 .focus-theme-categories{flex-wrap:nowrap;overflow-x:auto;min-inline-size:0;max-inline-size:100%;padding:6px 4px;scrollbar-width:thin} #panel-focus #focus-root.focus-os-v4 .focus-theme-categories button{flex:0 0 auto;white-space:nowrap} } /* Photo highlights need a reliable scrim behind the clock, intention and return link. */ #panel-focus #focus-root.focus-os-v4[data-studio-theme^="photo-"]::after{background:linear-gradient(180deg,color-mix(in srgb,var(--focus-surface-solid) 80%,transparent) 0 72px,color-mix(in srgb,var(--focus-surface-solid) 62%,transparent) 140px 62%,color-mix(in srgb,var(--focus-surface-solid) 24%,transparent))} /* The shared footer commits timer and presentation drafts together. */ #panel-focus #focus-root.focus-os-v4 #focus-save-settings{display:none} #panel-focus #focus-root.focus-os-v4 .focus-theme-preview>span{align-self:flex-start;flex:0 1 auto;max-inline-size:100%;padding:6px 10px;border-radius:8px;background:color-mix(in srgb,var(--focus-surface-solid) 80%,transparent);overflow-wrap:anywhere} /* Remove the legacy 300ms tap delay from the Focus controls used most often on phones. */ #panel-focus #focus-root.focus-os-v4 :is(.focus-tools,.focus-mode-dock,.focus-settings-nav,.focus-theme-mode-switch,.focus-theme-categories,.focus-settings-footer) button,#panel-focus #focus-root.focus-os-v4 :is(.focus-theme-card,.focus-preset-card){touch-action:manipulation} /* Start/pause/stop are inline paths. Drop the sprite filter so currentColor paints. */ #panel-focus #focus-root.focus-os-v4 .focus-primary-controls > button .focus-icon { filter: none; color: inherit; fill: currentColor; inline-size: 24px; block-size: 24px; } /* IBM Plex Sans Arabic and Naskh draw Arabic-Indic zero (U+0660) as a speck. The big clock uses Noto Sans Arabic, whose zero is a larger ring, with space between the digits so ٠٠ does not collapse into a row of periods. */ html[lang="ar"] #panel-focus #focus-root.focus-os-v4 :is(#focus-time, .focus-flip-number, .focus-desktop-clock, .focus-ambient-time) { font-family: "Noto Sans Arabic", "Rattib FB Noto Arabic", "Noto Naskh Arabic", "Traditional Arabic", "Segoe UI", Tahoma, sans-serif; font-weight: 600; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* The Arabic-Indic zero glyph is a dot. Draw an open ring in its place on the big clock. */ html[lang="ar"] #panel-focus #focus-root.focus-os-v4 .focus-indic-zero { display: inline-block; inline-size: 0.32em; block-size: 0.32em; margin-inline: 0.015em; border: 0.035em solid currentColor; border-radius: 50%; box-sizing: border-box; vertical-align: 0.1em; color: inherit; -webkit-text-fill-color: transparent; line-height: 0; }