/* ---- Handwritten v2 --------------------------------------------------
     A living study notebook, not a handwriting-font skin. Shantell provides
     the authored voice; Plex remains responsible for timers, dense data and
     body copy. Both families are local, so the extension has no font request. */
  @font-face{
    font-family:"PL Shantell"; font-style:normal; font-weight:300 800;
    font-display:swap; src:url("../fonts/shantell-sans-latin-ext.woff2") format("woff2");
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
      U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
      U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  }
  @font-face{
    font-family:"PL Shantell"; font-style:normal; font-weight:300 800;
    font-display:swap; src:url("../fonts/shantell-sans-latin.woff2") format("woff2");
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
      U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
      U+2212,U+2215,U+FEFF,U+FFFD;
  }
  :root{
    color-scheme:light;
    --bg:#efe3ca;
    --surface:#f8f0e0;
    --surface2:#e9dcc3;
    --paper-light:#f5ecd9;
    --paper-shade:#e9d7b7;
    --line:rgba(31,43,61,.16);
    --line2:rgba(31,43,61,.7);
    --ink:#1f2b3d;
    --soft:#3f4e65;
    --dim:#47566b;
    --faint:#4a586d;
    --ember:#f4475c;
    --ember-dim:rgba(244,71,92,.12);
    --ember-deep:#a91f36;
    --ember-fill:#d92f48;
    --ember-press:#ae2238;
    --ember-ink:#b52038;
    --rest:#2f65a5;
    --amber:#76580a;
    --good:#237450;
    --good-dim:rgba(35,116,80,.12);
    --bad:#bd293e;
    --track:rgba(47,101,165,.11);
    --scrim:rgba(31,43,61,.54);
    --shadow:0 3px 12px rgba(31,43,61,.045);
    --recall:#714393;
    --recall-deep:#593475;
    --fog:rgba(47,101,165,.05);
    --hatch:repeating-linear-gradient(-45deg,transparent 0 4px,rgba(47,101,165,.1) 4px 5px);
    --highlighter:#ffe46b;
    --mint:#61c69d;
    --pencil:#7f8ca0;
    --paper-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.03'/%3E%3C/svg%3E");
    --hand:"PL Shantell","Segoe Print",cursive;
    --glass-bg:rgba(248,240,224,.92);
    --glass-edge:inset 0 0 0 1px rgba(36,38,49,.13);
    --cursor-ink:var(--rest);
    --cursor-soft:rgba(45,93,161,.12);
    --cursor-glow:rgba(45,93,161,.32);
  }

  html[data-app-theme="handwritten"] body{
    position:relative;
    background-color:var(--bg);
    background-image:var(--paper-grain),
      linear-gradient(var(--session-wash),var(--session-wash)),
      radial-gradient(ellipse at 50% 22%,var(--paper-light),transparent 72%),
      linear-gradient(180deg,var(--bg),var(--paper-shade));
    background-size:140px 140px,100% 100%,100% 100%,100% 100%;
  }
  html[data-app-theme="handwritten"] body{
    --mood-a:rgba(244,71,92,.17);
    --mood-b:rgba(255,228,107,.33);
    --mood-transform:translate3d(0,0,0) rotate(-9deg);
    --mood-marker:rgba(255,228,107,.72);
    --mood-label:var(--ember-ink);
  }
  html[data-app-theme="handwritten"] body[data-mode="short"]{
    --mood-a:rgba(47,101,165,.14);
    --mood-b:rgba(97,198,157,.28);
    --mood-transform:translate3d(-10px,22px,0) rotate(7deg);
    --mood-marker:rgba(97,198,157,.58);
    --mood-label:var(--rest);
  }
  html[data-app-theme="handwritten"] body[data-mode="long"]{
    --mood-a:rgba(73,86,166,.16);
    --mood-b:rgba(139,95,191,.22);
    --mood-transform:translate3d(-20px,-6px,0) rotate(-3deg);
    --mood-marker:rgba(139,95,191,.28);
    --mood-label:var(--recall-deep);
  }
  /* A pale echo of the frontier on the paper, including narrow web/popup
     views where the outer landscape is hidden. It never catches input. */
  html[data-app-theme="handwritten"] body::before{
    content:""; position:fixed; z-index:0; pointer-events:none;
    width:min(860px,100vw); height:100dvh; bottom:0; left:50%;
    transform:translateX(-50%); opacity:.28;
    background:var(--frontier-landscape) center bottom / 100% auto no-repeat;
    filter:var(--frontier-filter);
    /* Leave clear paper behind the timer; richer ink at edges. */
    mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),
      radial-gradient(ellipse at 50% 35%,transparent 20%,#000 78%);
    mask-composite:intersect;
  }
  /* One off-edge marker field gives each timer mode an atmosphere without
     adding another object around the dial. Mode changes reshape the same ink. */
  html[data-app-theme="handwritten"] body::after{
    content:""; position:fixed; z-index:0; pointer-events:none;
    /* A large fixed element carrying a 150px blurred inset shadow gets
       repainted as content scrolls under it, which is felt as stutter on a
       fast scroll. Promote it to its own compositor layer so scrolling only
       recomposites it. (The running state already did this for its animation.) */
    will-change:transform;
    width:390px; height:420px; top:105px; right:-188px; opacity:0;
    border-radius:62% 38% 54% 46% / 42% 58% 40% 60%;
    background-color:var(--mood-a);
    box-shadow:inset 95px -70px 150px var(--mood-b);
    transform:var(--mood-transform);
    transition:background-color .55s ease,box-shadow .55s ease,
      transform .65s var(--ease-out),opacity .35s ease;
  }
  html[data-app-theme="handwritten"] body:has(.panel[data-panel="focus"].on)::after{
    opacity:.72;
  }
  html[data-app-theme="handwritten"] body.is-running:has(.panel[data-panel="focus"].on)::after{
    will-change:transform,opacity;
    animation:ink-arrive .85s var(--ease-out) both;
  }
  @keyframes ink-arrive{
    from{ opacity:.35; transform:var(--mood-transform) scale(.88); }
    to{ opacity:.82; transform:var(--mood-transform) scale(1); }
  }
  header,nav,.panel{ position:relative; z-index:1; }

  /* Ink Rider's frontier sketchbook: the landscape frames the physical
     sheet, while the timer remains on quiet, readable paper. The same local
     artwork supplies the live scene and still thumbnails; no rendering library. */
  html.view-full[data-app-theme="handwritten"]{
    background:linear-gradient(var(--frontier-sky),var(--frontier-ground));
    /* The off-edge ink decoration must not widen the page. */
    overflow-x:clip;
  }
  html[data-app-theme="handwritten"]{
    --frontier-landscape:url("ink-rider-landscape.svg?v=3");
    --frontier-sky:#f5ecd8; --frontier-ground:#ddc7a0;
    --daylight-filter:saturate(.85);
    --frontier-filter:var(--daylight-filter); --frontier-trail-color:#87651c;
    --session-wash:transparent;
  }
  html[data-app-theme="handwritten"][data-daylight="dawn"]{
    --bg:#efdfcd; --surface:#f7ecdf; --surface2:#edddcd;
    --paper-light:#f6e9da; --paper-shade:#eddbc7;
    --frontier-sky:#e9c9bc; --frontier-ground:#c5a986;
    --daylight-filter:sepia(.12) saturate(.75);
  }
  html[data-app-theme="handwritten"][data-daylight="sunset"]{
    --bg:#ead7c4; --surface:#f5e8d8; --surface2:#ecd7c2;
    --paper-light:#f3e3cf; --paper-shade:#eed8c2;
    --frontier-sky:#c98d78; --frontier-ground:#977564;
    --daylight-filter:sepia(.25) saturate(.85);
  }
  html[data-app-theme="handwritten"][data-daylight="night"]{
    /* Moonlit paper, not a black skin: the notebook ink stays readable. */
    --bg:#d6dce0; --surface:#e4e7e6; --surface2:#d5dce2;
    --paper-light:#e2e5e3; --paper-shade:#d4dbe0;
    --frontier-sky:#263448; --frontier-ground:#465360;
    --daylight-filter:hue-rotate(175deg) saturate(.3) brightness(.7);
  }
  html[data-app-theme="handwritten"]:has(body[data-mode="short"]){
    --session-wash:rgba(85,125,100,.08);
    --frontier-filter:var(--daylight-filter) hue-rotate(18deg) saturate(.8);
    --frontier-trail-color:#38634e;
  }
  html[data-app-theme="handwritten"]:has(body[data-mode="long"]){
    --session-wash:rgba(101,81,135,.09);
    --frontier-filter:var(--daylight-filter) hue-rotate(-15deg) saturate(.7);
    --frontier-trail-color:#684981;
  }
  html.view-full[data-app-theme="handwritten"]::before{
    content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
    background:var(--frontier-landscape) center / cover no-repeat;
    filter:var(--frontier-filter); transition:filter .8s ease;
  }
  html.view-full[data-app-theme="handwritten"] body{ z-index:1; }
  /* Separate ink planes preserve the drawing's depth and accept the local-clock palette.
     Only the cloud strokes and small reflected highlights move; the ground stays still. */
  html[data-app-theme="handwritten"] #frontier-scene{
    display:block; position:fixed; z-index:0; pointer-events:none; overflow:hidden;
    width:min(860px,100vw); height:100dvh; bottom:0; left:50%; transform:translateX(-50%);
    opacity:.64; color:#7c95a2;
    mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),
      radial-gradient(ellipse at 50% 30%,transparent 22%,rgba(0,0,0,.3) 48%,#000 86%);
    mask-composite:intersect;
    --land-far:#d3c2a3; --land-mid:#bdaf8d; --land-near:#ae986d;
    --land-plant:#748c71; --land-water:#a9c2b3; --land-snow:#eee9d9;
    --land-stone:#b0ab91; --land-strata:#bd9276; --land-line:#879077;
    --land-detail:#627d68; --land-shadow:#777d69; --land-glint:#fff0bf;
  }
  html[data-app-theme="handwritten"]:has(#frontier-scene) body::before,
  html.view-full[data-app-theme="handwritten"]:has(#frontier-scene)::before{ display:none; }
  #frontier-scene > svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
  html[data-cowboy-landscape="alpine"] #frontier-scene{
    --land-far:#b9c7bf; --land-mid:#abb994; --land-near:#95aa83; --land-plant:#668773;
  }
  html[data-cowboy-landscape="prairie"] #frontier-scene{
    --land-far:#c5cea8; --land-mid:#afbc90; --land-near:#a7af7f; --land-plant:#78976f;
  }
  html[data-cowboy-landscape="canyon"] #frontier-scene{
    --land-far:#d2b294; --land-mid:#c1a181; --land-near:#b39774; --land-plant:#768c70;
    --land-line:#a18a76;
  }
  html[data-daylight="dawn"] #frontier-scene{
    --land-far:#d4c0af; --land-mid:#bfb593; --land-near:#b09f7b;
    --land-line:#9c9280; --land-water:#bdcbc2; --land-glint:#fff3d9;
  }
  html[data-daylight="sunset"] #frontier-scene{
    --land-far:#d1ab96; --land-mid:#bc9f85; --land-near:#ac9175;
    --land-plant:#7a886c; --land-line:#9d8779; --land-water:#b0bcb0; --land-glint:#ffe2ad;
  }
  html[data-daylight="night"] #frontier-scene{
    --land-far:#9cabb4; --land-mid:#829c9f; --land-near:#748e88;
    --land-plant:#55766d; --land-water:#a2bdc2; --land-snow:#d4e0de;
    --land-stone:#8f9c98; --land-strata:#839799; --land-line:#657f8a;
    --land-detail:#466c67; --land-shadow:#516b7a; --land-glint:#dbeae6;
  }
  #frontier-scene .land-sun{ opacity:.7; }
  #frontier-scene .land-stars{ opacity:0; }
  html[data-daylight="night"] #frontier-scene .land-sun{ display:none; }
  html[data-daylight="night"] #frontier-scene .land-stars{ opacity:.75; }
  #frontier-scene .land-ridges{ opacity:.62; }
  #frontier-scene .land-clouds{ opacity:.65; animation:frontier-cloud-drift 37s ease-in-out infinite alternate paused; }
  #frontier-scene .land-shimmer{ animation:frontier-water-light 9.7s ease-in-out infinite paused; }
  html[data-app-theme="handwritten"] body:has(#panel-focus.on) #frontier-scene:not([data-sleep="true"]) :is(.land-clouds,.land-shimmer){ animation-play-state:running; }
  @keyframes frontier-cloud-drift{ from{ transform:translateX(-12px); } to{ transform:translateX(16px); } }
  @keyframes frontier-water-light{
    0%,100%{ opacity:.12; transform:translate(0,2px); }
    48%{ opacity:.7; transform:translate(3px,-1px); }
  }
  @media(min-width:1000px){
    html.web-shell.view-full[data-app-theme="handwritten"] #frontier-scene{
      width:min(1180px,calc(100vw - 248px)); left:calc(50% + 124px);
    }
  }
  @media(prefers-reduced-motion:reduce){
    html[data-app-theme="handwritten"] #frontier-scene :is(.land-clouds,.land-shimmer){ animation:none; }
    #frontier-scene .land-shimmer{ opacity:.3; }
  }
  .cowboy-landscape-art{ --frontier-landscape:url("ink-rider-landscape.svg?v=3"); }
  html[data-app-theme="handwritten"][data-cowboy-landscape="alpine"],
  .cowboy-landscape-art[data-cowboy-landscape="alpine"]{ --frontier-landscape:url("ink-rider-alpine.svg?v=3"); }
  html[data-app-theme="handwritten"][data-cowboy-landscape="prairie"],
  .cowboy-landscape-art[data-cowboy-landscape="prairie"]{ --frontier-landscape:url("ink-rider-prairie.svg?v=3"); }
  html[data-app-theme="handwritten"][data-cowboy-landscape="canyon"],
  .cowboy-landscape-art[data-cowboy-landscape="canyon"]{ --frontier-landscape:url("ink-rider-canyon.svg?v=3"); }
  .cowboy-landscapes{ min-width:0; margin:0 0 8px; padding:12px; border:1px solid var(--line); border-radius:12px; grid-column:1 / -1; background:var(--surface); }
  .cowboy-landscapes legend{ padding:0 6px; font:600 16px/1.4 var(--hand,var(--ui)); color:var(--ink); }
  .cowboy-landscapes > p{ margin:0 0 12px; color:var(--soft); font-size:12px; }
  .cowboy-landscape-options{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .cowboy-landscape{ display:flex; flex-direction:column; overflow:hidden; min-width:0; min-height:44px; padding:0; border:1px solid var(--line2); border-radius:8px; background:var(--surface); color:var(--ink); text-align:left; cursor:pointer; touch-action:manipulation; }
  .cowboy-landscape:hover{ border-color:var(--ink); }
  .cowboy-landscape:active{ background:var(--surface2); }
  .cowboy-landscape[aria-pressed="true"]{ border-color:var(--rest); box-shadow:inset 0 0 0 1px var(--rest); }
  .cowboy-landscape:focus-visible{ outline:2px solid var(--rest); outline-offset:3px; }
  .cowboy-landscape-art{ display:block; width:100%; aspect-ratio:8 / 5; background:var(--frontier-landscape) center / cover no-repeat,var(--bg); border-bottom:1px solid var(--line); }
  .cowboy-landscape-label{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 8px; padding:10px; font:600 12px/1.5 var(--ui); }
  .cowboy-landscape-label > span{ color:var(--soft); font-weight:400; }
  @media (min-width:700px){ html.view-full .cowboy-landscape-options{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
  html.view-full[data-app-theme="handwritten"]::after{
    content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
    background:linear-gradient(#f5b85f,#ee9869 60%,#b87771);
    opacity:0; transition:opacity .65s ease;
  }
  html[data-app-theme="handwritten"] .frontier-sunset{
    display:block; position:fixed; z-index:0; pointer-events:none;
    width:min(860px,100vw); height:100dvh; bottom:0; left:50%;
    transform:translateX(-50%); background:linear-gradient(#ffd98e,#f2ba8c);
    mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
    opacity:0; transition:opacity .65s ease;
  }
  html.view-full[data-app-theme="handwritten"].frontier-goal-moment::after{ opacity:.55; }
  html[data-app-theme="handwritten"].frontier-goal-moment .frontier-sunset{ opacity:.15; }
  html[data-app-theme="handwritten"] .frontier-trail{
    display:block; color:var(--frontier-trail-color); padding:12px 4px 0;
    margin:8px 0 12px; pointer-events:none;
  }
  .frontier-trail-heading{ display:flex; justify-content:space-between; gap:12px; font:500 12px/1.5 var(--hand); }
  .frontier-trail-heading span:last-child{ color:var(--dim); font-family:var(--mono); }
  .frontier-trail-track{ position:relative; height:40px; margin:4px 20px 0; }
  .frontier-trail-track::before{
    content:""; position:absolute; left:0; right:0; top:30px;
    border-top:1px dashed var(--frontier-trail-color); opacity:.38;
  }
  .frontier-trail-ink{
    position:absolute; left:0; top:30px; width:100%; height:2px;
    background:currentColor; transform:scaleX(var(--frontier-progress,0)); transform-origin:left center;
  }
  .frontier-traveler{
    position:absolute; z-index:1; left:0; bottom:10px; width:38px; height:32px;
    background:var(--ink); translate:-50% 0;
    transform:translateX(calc(var(--frontier-progress,0) * (100cqw - 40px)));
    mask:url("../icons/ink-rider.svg?v=2") center / contain no-repeat;
  }
  .frontier-trail{ container-type:inline-size; }
  .frontier-trail-ready :is(.frontier-traveler,.frontier-trail-ink){ transition:transform .75s var(--ease-out); }
  .frontier-trail-horizon{ position:absolute; right:-20px; bottom:9px; width:48px; height:32px; }
  .frontier-trail[data-complete="true"] .frontier-traveler{ background:var(--frontier-trail-color); }
  @media (prefers-reduced-motion:reduce){
    html.view-full[data-app-theme="handwritten"]::before,
    html.view-full[data-app-theme="handwritten"]::after,
    html[data-app-theme="handwritten"] .frontier-sunset,
    .frontier-trail-ready :is(.frontier-traveler,.frontier-trail-ink){ transition:none; }
  }
  html.view-full[data-app-theme="handwritten"] body{
    background-color:var(--bg);
    box-shadow:0 0 0 1px rgba(31,43,61,.08),0 26px 72px rgba(31,43,61,.16);
  }
  html.view-full[data-app-theme="handwritten"] body::after{
    position:absolute; width:520px; height:500px; top:130px; right:-260px;
  }

  header{
    background:var(--surface); border-bottom:1px solid rgba(47,101,165,.34);
    padding-top:15px; padding-bottom:14px; box-shadow:0 2px 0 rgba(47,101,165,.06);
  }
  .mark{ width:21px; height:21px; }
  header .mark{ display:none; }
  .ink-rider{
    display:block; flex:0 0 44px; width:44px; height:44px; margin:-4px; color:var(--ink);
    position:relative; isolation:isolate; padding:0; border:0; border-radius:6px;
    background:none; cursor:pointer; touch-action:manipulation;
  }
  .ink-rider:focus-visible{ outline:2px solid var(--rest); outline-offset:0; }
  .ink-rider::before{
    content:""; position:absolute; inset:4px; z-index:1; background:currentColor;
    -webkit-mask:url("../icons/ink-rider.svg?v=2") center / contain no-repeat;
    mask:url("../icons/ink-rider.svg?v=2") center / contain no-repeat;
    pointer-events:none; transform-origin:60% 90%;
    transition:transform .18s var(--ease-out);
  }
  .ink-rider::after{
    content:""; position:absolute; left:3px; right:4px; bottom:1px; height:4px;
    background:var(--highlighter); border-radius:60% 30% 55% 35%; rotate:-3deg;
    opacity:0; transform:scaleX(.2); transform-origin:left center; pointer-events:none;
    transition:opacity .18s ease,transform .28s var(--ease-out);
  }
  /* Keep the hit box still while the silhouette greets the pointer once. */
  @media (hover:hover) and (pointer:fine){
    .ink-rider:hover::before{
      transform:translate(2px,-1px) rotate(-2deg);
      animation:rider-greeting .65s var(--ease-out);
    }
    .ink-rider:hover::after{ opacity:.85; transform:scaleX(1); }
    .brand-name:hover .brand-ledger::after{ animation:marker-swipe .45s var(--ease-out) both; }
  }
  .ink-rider:focus-visible::before{
    transform:translate(2px,-1px) rotate(-2deg); animation:rider-greeting .65s var(--ease-out);
  }
  .ink-rider:focus-visible::after{ opacity:.85; transform:scaleX(1); }
  header:has(.ink-rider:focus-visible) .brand-ledger::after{ animation:marker-swipe .45s var(--ease-out) both; }
  @keyframes rider-greeting{
    from{ transform:translate(0,0) rotate(0deg); }
    30%{ transform:translate(1px,-3px) rotate(-5deg); }
    55%{ transform:translate(2px,0) rotate(1deg); }
    80%{ transform:translate(2px,-2px) rotate(-3deg); }
    to{ transform:translate(2px,-1px) rotate(-2deg); }
  }
  .rider-hoofprint{
    position:absolute; right:-2px; bottom:-4px; width:20px; height:20px; z-index:2;
    color:var(--amber); opacity:0; pointer-events:none; transform:rotate(-12deg);
  }
  .ink-rider.block-complete .rider-hoofprint{ animation:hoofprint-stamp 1.8s var(--ease-out) both; }
  @keyframes hoofprint-stamp{
    from{ opacity:0; transform:translateY(-4px) rotate(-12deg) scale(1.25); }
    15%,75%{ opacity:1; transform:translateY(0) rotate(-12deg) scale(1); }
    to{ opacity:0; transform:translateY(0) rotate(-12deg) scale(1); }
  }
  .mk-track{ stroke:rgba(45,93,161,.28); }
  .mk-fill{ stroke:var(--ember); }
  .mk-dot{ fill:var(--rest); }
  .brand{
    font-family:var(--hand); font-size:19px; font-weight:650;
    font-variation-settings:"BNCE" 20,"INFM" 68,"SPAC" 8;
    letter-spacing:-.45px; line-height:1.2;
  }
  .brand{ flex:1 1 auto; }
  .brand-row{ gap:10px; }
  .brand-name{ position:relative; isolation:isolate; white-space:nowrap; }
  .brand-ledger{ position:relative; isolation:isolate; }
  .brand-ledger::after{
    content:""; position:absolute; z-index:-1; left:-2px; right:-3px; bottom:-1px;
    height:6px; background:rgba(255,228,107,.72); border-radius:62% 28% 58% 35%;
    rotate:-1.5deg; transform:skewX(-8deg); transform-origin:left center;
  }
  @keyframes marker-swipe{
    from{ opacity:.25; transform:skewX(-8deg) scaleX(0); }
    to{ opacity:1; transform:skewX(-8deg) scaleX(1); }
  }
  header .brand-entry,header .brand-tag{ display:none; }
  .brand-tagline{ margin-top:6px; color:var(--dim); font:400 12px/1.4 var(--ui); letter-spacing:.3px; }
  html.view-full .brand-tagline{ display:block; }
  html.view-full .ink-rider{ flex-basis:56px; width:56px; height:48px; margin:0; }
  html.view-full .ink-rider::before{ inset:0; }
  .stamp{
    font-family:var(--hand); font-size:12px; line-height:1.15; letter-spacing:.05px;
    font-variation-settings:"BNCE" -12,"INFM" 82,"SPAC" 5;
    text-transform:none; border:1.5px solid currentColor;
    border-radius:12px 6px 11px 5px; transform:rotate(-1deg);
  }
  .stamp.brand-tag{
    position:relative; isolation:isolate; color:var(--ink); border:none;
    padding:5px 8px; transform:rotate(1.5deg); min-height:28px;
  }
  .stamp.brand-tag::before{
    content:""; position:absolute; z-index:-1; inset:1px -2px -1px;
    background:var(--highlighter); border-radius:8px 3px 9px 4px; rotate:-1deg;
  }
  .stamp.brand-tag:focus-visible{ outline:2px solid var(--rest); outline-offset:4px; }
  .head-btn{ width:36px; height:36px; border-radius:8px; align-self:center; }
  @media(max-width:340px){.brand{font-size:18px;}.brand-row{column-gap:8px;}}

  nav{
    background:var(--surface); border-bottom:1px solid var(--line);
    padding-inline:7px;
  }
  .tab{
    font-family:var(--hand); font-size:14px; font-weight:610; color:var(--soft);
    font-variation-settings:"BNCE" 8,"INFM" 58,"SPAC" 3;
    letter-spacing:-.2px; padding-inline:7px;
  }
  .tab:hover{ color:var(--rest); }
  .tab.on{ color:var(--ink); rotate:-1deg; }
  .tab::after{
    left:6px; right:5px; bottom:1px; height:3px; border-radius:70% 28% 62% 34%;
    background:var(--ember); rotate:-1deg; transform-origin:left center;
  }
  .tab-badge{ background:var(--highlighter); color:var(--ink); border:1px solid var(--ink); }
  @media (max-width:380px){
    html:not(.view-full)[data-app-theme="handwritten"] nav{ padding-inline:4px; }
    html:not(.view-full)[data-app-theme="handwritten"] .tab{
      font-size:12.5px; padding-inline:4px;
    }
  }

  /* Compact extension navigation: small notebook tabs, with a separate gear.
     Reuse the existing icons and selected state; web navigation keeps its rail. */
  html:not(.view-full):not(.web-shell) nav{
    align-items:center; gap:3px; padding:6px 8px;
  }
  html:not(.view-full):not(.web-shell) nav .tab{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; min-height:52px; padding:6px 4px; margin-bottom:0;
    border:1px solid transparent; border-radius:10px 7px 9px 6px;
    font-size:12.5px; line-height:1.4; white-space:nowrap; rotate:0deg;
    transition:background-color .15s, color .15s, border-color .15s;
  }
  html:not(.view-full):not(.web-shell) nav .tab-ico{
    display:block; flex:none; width:18px; height:18px;
  }
  html:not(.view-full):not(.web-shell) nav .tab:hover{
    background:var(--track); color:var(--ink);
  }
  html:not(.view-full):not(.web-shell) nav .tab.on{
    background:var(--ember-dim); color:var(--ink);
  }
  html:not(.view-full):not(.web-shell) nav .tab::after{
    left:22%; right:22%; bottom:2px;
  }
  html:not(.view-full):not(.web-shell) nav .tab:focus-visible{
    outline:2px solid var(--rest); outline-offset:-2px;
  }
  html:not(.view-full):not(.web-shell) nav .tab-setup{
    flex:0 0 44px; min-width:44px; min-height:44px; margin-left:5px;
    border-color:var(--line); border-radius:10px;
  }
  html:not(.view-full):not(.web-shell) nav .tab-setup svg{
    width:19px; height:19px;
  }
  html:not(.view-full):not(.web-shell) nav .tab-badge{
    top:2px; right:2px; font-size:10px; line-height:1.2;
  }
  html:not(.view-full):not(.web-shell) nav .tab-badge.dot{
    top:4px; right:7px;
  }
  @media (max-width:340px){
    html:not(.view-full):not(.web-shell) nav{ gap:1px; padding-inline:4px; }
    html:not(.view-full):not(.web-shell) nav .tab{
      min-width:44px; padding-inline:0; font-size:12px;
    }
    html:not(.view-full):not(.web-shell) nav .tab:not(.tab-setup){ flex:1 0 auto; }
    html:not(.view-full):not(.web-shell) nav .tab-setup{ margin-left:2px; }
  }
  @media (prefers-reduced-motion:reduce){
    html:not(.view-full):not(.web-shell) nav .tab,
    html:not(.view-full):not(.web-shell) nav .tab::after{ transition:none; }
  }

  .panel{ min-height:410px; }
  .panel[data-panel="focus"]::before{ content:none; }

  select option{ background:var(--surface); color:var(--ink); }
  input,textarea{ caret-color:var(--ember); }
  .task-pick select,.ssettings,.fr-invite-sheet,.overlay .ov-card{
    background:var(--surface); border:1.5px solid rgba(31,43,61,.7);
    border-radius:13px 7px 15px 6px; box-shadow:var(--shadow);
  }
  .task-pick select{ font-weight:650; }
  .ssettings-toggle{ color:var(--rest); font-size:16px; }
  .goal-chip,.share-toggle,.ob-chip,.soc-add-friend,.ns-add,.tp-buy{
    font-family:var(--hand); font-size:12.5px; font-weight:650;
    font-variation-settings:"BNCE" 5,"INFM" 55,"SPAC" 2;
    border-radius:12px 5px 14px 6px;
  }

  .timer{ position:relative; isolation:isolate; }
  .ring-wrap{ rotate:-.45deg; }
  .ring-wrap::before{
    content:none;
  }
  .ring-wrap::after{
    content:"ready when you are ↘"; position:absolute; right:-42px; top:15px;
    color:var(--rest); font:620 12px/1 var(--hand); rotate:7deg;
    font-variation-settings:"BNCE" 18,"INFM" 88,"SPAC" 0;
    pointer-events:none; white-space:nowrap;
  }
  body.is-running[data-mode="focus"] .ring-wrap::after{ content:"stay with it ↘"; }
  body[data-mode="short"] .ring-wrap::after,
  body[data-mode="long"] .ring-wrap::after{ content:none; }
  .ring-ticks{ display:none; }
  body.is-running .ring-wrap::after{ animation:note-nod .52s var(--ease-spring) both; }
  @keyframes note-nod{
    from{ opacity:0; transform:translate3d(8px,-4px,0) rotate(5deg); }
    to{ opacity:1; transform:none; }
  }
  .ring-ticks{ stroke:rgba(45,93,161,.42); }
  svg.ring > circle:not(#ring-progress){ stroke:var(--track) !important; }
  #ring-progress{
    stroke:var(--session-ink,var(--ember)) !important; stroke-width:5.5 !important;
    filter:drop-shadow(1px 1.5px 0 rgba(31,43,61,.18));
  }
  #time{
    color:var(--ink); text-shadow:none; padding:0 4px 2px;
    background:linear-gradient(transparent 62%,var(--mood-marker) 62% 91%,transparent 91%);
  }
  #mode-label{
    font-family:var(--hand); color:var(--mood-label); font-size:13px;
    font-weight:650; letter-spacing:.15px; text-transform:none; margin-top:6px;
    font-variation-settings:"BNCE" -8,"INFM" 72,"SPAC" 4;
  }
  .dot{ width:7px; height:7px; border:1px solid var(--ink); background:var(--surface); }
  .dot.on{ background:var(--highlighter); transform:scale(1.35) rotate(8deg); }

  /* Real completed sessions become pen tallies in the page margin. Only the
     newest group lands; repeated timer renders leave the ink still. */
  .daily-tally{
    display:flex; position:absolute; z-index:2; left:0; top:63px; width:59px;
    flex-direction:column; align-items:flex-start; color:var(--rest); rotate:-2deg;
    pointer-events:none;
  }
  .daily-tally[aria-label^="No "]{ display:none; }
  .tally-label{
    font:650 12px/1 var(--hand); font-variation-settings:"BNCE" 15,"INFM" 84,"SPAC" 0;
    padding:0 2px 3px; border-bottom:3px solid rgba(255,228,107,.72);
  }
  .tally-marks{ display:grid; grid-template-columns:repeat(2,26px); gap:3px 2px; min-height:19px; margin-top:5px; }
  .tally-group{ position:relative; display:block; width:26px; height:18px; }
  .tally-group i{ position:absolute; top:1px; width:1.7px; height:16px;
    border-radius:60% 35% 55% 40%; background:var(--rest); rotate:2deg; }
  .tally-group i:nth-child(1){ left:3px; rotate:-3deg; }
  .tally-group i:nth-child(2){ left:9px; rotate:2deg; }
  .tally-group i:nth-child(3){ left:15px; rotate:-1deg; }
  .tally-group i:nth-child(4){ left:21px; rotate:3deg; }
  .tally-group i.cross{ left:2px; top:8px; width:23px; height:1.9px; rotate:-18deg; }
  .tally-zero{ font:500 15px/1 var(--hand); opacity:.45; }
  .tally-total{ margin-top:3px; color:var(--dim); font:560 11px/1 var(--hand); white-space:nowrap; }
  .daily-tally.inked .tally-group:last-child{
    animation:tally-land .42s cubic-bezier(.2,1.25,.4,1) both;
  }
  @keyframes tally-land{
    from{ clip-path:inset(0 100% 0 0); opacity:.2; transform:rotate(-4deg); }
    to{ clip-path:inset(0); opacity:1; transform:none; }
  }

  button.ctl{
    color:var(--ink); background:var(--surface); border:1.5px solid rgba(31,43,61,.78);
    border-radius:47% 53% 45% 55%; width:42px; height:42px;
    box-shadow:0 3px 10px rgba(31,43,61,.13);
  }
  button.ctl:hover{ color:var(--rest); background:var(--surface2); }
  #start{
    color:#fff; background:var(--ember-fill); border:1.5px solid rgba(31,43,61,.78);
    border-radius:15px 6px 17px 7px;
    box-shadow:0 4px 12px rgba(31,43,61,.2); font-family:var(--hand);
    font-variation-settings:"BNCE" 18,"INFM" 52,"SPAC" 2;
    font-size:18px; font-weight:680; letter-spacing:.1px;
  }
  #start:hover{ filter:brightness(1.03); translate:0 -1px; box-shadow:0 6px 16px rgba(31,43,61,.23); }
  #start:active{ translate:0 1px; box-shadow:0 2px 6px rgba(31,43,61,.16); }
  #start[data-running="true"]{ background:var(--surface); color:var(--ember-ink); }
  /* Motion is earned by an action: starting/resuming seats the dial with a
     soft spring, then the button lands like a quick ink stamp. Both settle
     completely so nothing keeps bobbing while the user is concentrating. */
  html[data-app-theme="handwritten"] body.is-running[data-mode="focus"]
    .panel[data-panel="focus"].on .ring-wrap{
    animation:focus-dial-lock .62s var(--ease-spring) both;
  }
  html[data-app-theme="handwritten"] body.is-running[data-mode="focus"]
    .panel[data-panel="focus"].on #start{
    animation:focus-button-stamp .4s cubic-bezier(.2,1.35,.4,1) both;
  }
  @keyframes focus-dial-lock{
    0%{ opacity:.55; transform:translate3d(0,8px,0) scale(.91); }
    62%{ opacity:1; transform:translate3d(0,-2px,0) scale(1.025); }
    100%{ opacity:1; transform:none; }
  }
  @keyframes focus-button-stamp{
    0%{ transform:translate3d(0,-3px,0) scale(1.035) rotate(-.6deg); }
    58%{ transform:translate3d(0,1px,0) scale(.975) rotate(.25deg); }
    100%{ transform:none; }
  }
  #reset,#skip{ transition:rotate .18s var(--ease-out),transform .18s var(--ease-out),color .15s,background .15s; }
  #reset:hover{ rotate:-6deg; }
  #skip:hover{ rotate:6deg; }

  .hud,.commit,.reminder-nudge,.onboard,.rv-item,.grow,.squad-card{
    background:var(--surface); border:1.5px solid rgba(31,43,61,.68);
    border-radius:14px 9px 15px 8px; box-shadow:var(--shadow);
  }
  .panel > .card,.stats-view > .card{
    background:var(--surface); border:1.5px solid rgba(31,43,61,.64);
    border-radius:14px 9px 15px 8px; padding:13px 14px;
    box-shadow:var(--shadow);
  }
  .panel > :where(.card,.totrow,.exrow) + :where(.card,.totrow,.exrow),
  .stats-view > :where(.card,.totrow,.exrow) + :where(.card,.totrow,.exrow){
    border-top:1.5px solid rgba(47,101,165,.38); padding-top:13px; margin-top:20px;
  }
  .stats-seg{
    background:rgba(237,243,255,.82); border:1px solid rgba(47,101,165,.28);
    border-radius:12px 7px 13px 8px;
  }
  .stats-segbtn{
    font-family:var(--hand); font-size:12.5px; font-weight:630;
    font-variation-settings:"BNCE" 7,"INFM" 62,"SPAC" 2;
  }
  .stats-segbtn.on{ rotate:-.6deg; }
  .card h3{
    font-family:var(--hand); font-size:17px; font-weight:650;
    font-variation-settings:"BNCE" 12,"INFM" 66,"SPAC" 4;
    letter-spacing:-.2px; text-transform:none; color:var(--ink);
    border-bottom:1.5px dashed rgba(47,101,165,.34); padding-bottom:4px;
  }
  .card h3::after{ content:none; }
  .card h3 .big{ color:var(--rest); }
  .hud-lvl,.rank,.soc-avatar{
    background:var(--highlighter); border:1.5px solid rgba(31,43,61,.78);
    color:var(--ink); box-shadow:2px 2px 0 rgba(47,101,165,.3);
  }
  .hud-xp > span,.xp-bar > div,.sg-fill{
    background:linear-gradient(90deg,var(--ember),var(--highlighter),var(--mint),var(--ember));
    background-size:200% 100%;
  }
  .beat,.commit-bar,.hud-xp,.xp-bar,.sg-bar{ background-color:var(--surface2); }
  #beat-fill,.commit-bar > div{ background:var(--ember); }
  #duel-list .squad-card{ background:var(--surface); border-color:var(--ink); box-shadow:var(--shadow); }
  .live-panel{
    background-color:rgba(255,254,250,.97);
    background-image:linear-gradient(rgba(220,231,248,.58) 1px,transparent 1px);
    background-size:100% 22px; border:1.5px solid rgba(31,43,61,.7);
    border-radius:15px 7px 16px 8px; box-shadow:3px 3px 0 rgba(47,101,165,.17);
  }
  .live-title{ font-family:var(--hand); font-size:15px; font-weight:660;
    font-variation-settings:"BNCE" 12,"INFM" 68,"SPAC" 3; }
  .live-person{ border-radius:12px 6px 13px 7px; }
  .live-copy strong,.live-join,.live-start{ font-family:var(--hand); font-weight:650;
    font-variation-settings:"BNCE" 8,"INFM" 62,"SPAC" 2; }
  .live-join,.live-start{ border:1.5px solid var(--ink); box-shadow:2px 2px 0 rgba(31,43,61,.7);
    border-radius:10px 5px 11px 6px; }
  .upcoming{ border:1.5px solid rgba(31,43,61,.55); border-radius:13px 6px 14px 7px;
    background:rgba(255,254,250,.94); }
  .upcoming-title,.upcoming-plan,.plan-action{ font-family:var(--hand); font-weight:650;
    font-variation-settings:"BNCE" 8,"INFM" 62,"SPAC" 2; }
  .sc-name,.sc-focus,.sc-perfect,.sc-pledge-toggle{ font-family:var(--hand); font-weight:650; }
  .plan-row + .plan-row,.plan-form{ border-color:rgba(47,101,165,.22); }
  .sg-tick{ background:rgba(255,255,255,.65); }
  .sg-tick.on{ background:var(--ink); }

  .ov-title,.ob-title,.rn-title,.fw-title,.rv-head-title,.review-head h2,.vz-htitle,.lu-title{
    font-family:var(--hand); font-weight:660; letter-spacing:-.2px;
    font-variation-settings:"BNCE" 12,"INFM" 65,"SPAC" 4;
  }
  .ov-title{ font-size:19px; }
  .ob-title,.rv-head-title,.review-head h2{ font-size:20px; }
  .rn-title,.fw-title{ font-size:18px; }
  .ov-save,.why-save,.sb-continue,.ns-hero-cta,.vz-lane-add-btn,
  #kb-add-task,#tk-add-sub,#add-anchor,.sc-renew,.se-start,.sf-create,.rqs-start,
  .rv-start-next,.re-action{
    background:var(--ember-fill); border:2px solid var(--ink); color:#fff;
    box-shadow:2px 2px 0 rgba(31,43,61,.72); font-family:var(--hand); font-weight:660;
    font-variation-settings:"BNCE" 10,"INFM" 58,"SPAC" 3;
  }
  #toast{
    background:var(--highlighter); border:2px solid var(--ink); color:var(--ink);
    box-shadow:3px 3px 0 rgba(47,101,165,.4); font-family:var(--hand); font-size:15px;
  }
  .xp-float{ color:var(--ember-ink); text-shadow:2px 2px 0 var(--highlighter); }
  #heavy-stamp .hs-mark,#heavy-stamp.battle .hs-mark{
    background:var(--surface); border-color:var(--ink); color:var(--ember-ink);
    background-image:linear-gradient(rgba(220,231,248,.52) 1px,transparent 1px);
    background-size:100% 18px; border-radius:16px 7px 18px 8px;
    box-shadow:7px 7px 0 rgba(31,43,61,.82);
  }
  .hs-title{
    font-family:var(--hand); font-variation-settings:"BNCE" 25,"INFM" 80,"SPAC" 2;
    text-transform:none; letter-spacing:-.5px;
  }

  /* Each product area borrows one notebook object, rather than scattering
     decorative doodles everywhere. */
  .tasks-head h2,.setup-head h2,.soc-title h2{
    font-family:var(--hand); font-size:21px; font-weight:670;
    font-variation-settings:"BNCE" 14,"INFM" 70,"SPAC" 3;
  }
  .task-compose,.kb-filter{
    background:rgba(237,243,255,.82); border-color:rgba(47,101,165,.28);
    border-radius:12px 7px 13px 8px;
  }
  .kb-filter-btn,.setup-group > summary b{
    font-family:var(--hand); font-weight:650;
    font-variation-settings:"BNCE" 7,"INFM" 62,"SPAC" 2;
  }
  .kb-filter-btn.on{ rotate:-.5deg; }
  .setup-group > summary::after{ color:var(--rest); font-family:var(--hand); }
  .kb-col{
    background:rgba(237,243,255,.82); border:1px solid rgba(47,101,165,.35);
    border-radius:11px 7px 12px 8px;
  }
  .kb-head{ font-family:var(--hand); font-size:12px; text-transform:none; letter-spacing:.1px; }
  .kb-card{
    position:relative; background:var(--surface); border:1px solid rgba(31,43,61,.42);
    border-radius:9px 6px 10px 7px; box-shadow:0 2px 0 rgba(47,101,165,.13);
  }
  .kb-card.done-just::before{
    content:"✓"; position:absolute; z-index:2; right:4px; top:-9px; color:var(--good);
    font:750 24px/1 var(--hand); rotate:-9deg; animation:hand-check .42s cubic-bezier(.2,1.35,.4,1) both;
  }
  @keyframes hand-check{
    from{ opacity:0; transform:scale(2.2) rotate(-12deg); }
    to{ opacity:1; transform:none; }
  }
  .panel[data-panel="review"] .rv-item{
    background-color:rgba(255,254,250,.97);
    background-image:linear-gradient(rgba(220,231,248,.56) 1px,transparent 1px);
    background-size:100% 22px; border-left:3px solid rgba(244,71,92,.48);
  }
  .panel[data-panel="stats"] .grow{ border-color:rgba(47,101,165,.5); }
  .tp-preview.handwritten{ box-shadow:0 0 0 2px rgba(255,228,107,.55),0 2px 0 rgba(47,101,165,.22); }

  /* The extension popup is a focus cockpit, not a document. Chrome caps its
     usable height, so established-user status is compressed without removing
     primary data or sacrificing readable pointer targets. The roomy full-tab
     layout stays unchanged. */
  @media (max-height:700px){
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"].on{
      min-height:0; padding:10px 16px 8px;
    }
    html:not(.view-full)[data-app-theme="handwritten"]
      .panel[data-panel="focus"].on > *{
      animation:none;
    }
    /* Keep the compact Focus page about the next block. Level/XP remains in
       Progress, the goal row already reports today's total, and Start already
       says what the idle ring annotation repeated. */
    html:not(.view-full)[data-app-theme="handwritten"] .brand-entry,
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"]
      :is(.hud,.daily-tally){
      display:none !important;
    }
    html:not(.view-full)[data-app-theme="handwritten"]
      body:has(.panel[data-panel="focus"].on)::after{
      opacity:.28;
    }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"]::before{
      content:none;
    }
    html:not(.view-full)[data-app-theme="handwritten"]
      .panel[data-panel="focus"] .ring-wrap::after{
      content:none;
    }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"] .hud{
      min-height:44px; gap:8px; padding:5px 9px; margin-bottom:7px;
      border-radius:11px 7px 12px 8px;
    }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"] .hud-lvl{
      width:30px; height:30px; font-size:14px; border-width:1.5px;
    }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"] .hud-top{
      margin-bottom:3px;
    }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"] .hud-tier,
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"] .hud-streak{
      font-size:12px;
    }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"] .hud-xp{
      height:5px;
    }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"]
      :is(.capture-banner,.review-queued){
      min-height:26px; padding:2px 0 6px; margin-bottom:7px; font-size:12px;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"] .focus-top{
      min-height:38px; margin-bottom:0;
    }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"] .task-pick select{
      height:38px; padding-block:4px; font-size:13px;
    }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"] .ssettings-toggle{
      width:32px; height:32px; padding:0;
    }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"] .timer{
      padding:6px 0 0;
    }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"] .ring-wrap{
      width:200px; height:200px;
    }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"] svg.ring{
      width:100%; height:100%;
    }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"] #time{
      font-size:42px;
    }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"] .ring-wrap::after{
      right:-34px; top:10px; font-size:12px;
    }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"] .daily-tally{
      left:2px; top:52px; scale:.9; transform-origin:left top;
    }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"] #cycle-dots{
      margin:7px 0 8px;
    }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"]
      #commit-card:has(.commit-prog){
      position:relative; display:grid; grid-template-columns:auto minmax(90px,1fr);
      align-items:center; gap:10px; min-height:44px; margin-top:7px; padding:6px 38px 6px 10px;
    }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"]
      #commit-card:has(.commit-prog) .commit-head{ min-width:76px; }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"]
      #commit-card:has(.commit-prog) :is(.commit-streak,.stamp.met,.commit-sub){ display:none; }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"]
      #commit-card:has(.commit-prog) .commit-title{ font-size:12px; }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"]
      #commit-card:has(.commit-prog) .commit-prog{ gap:7px; margin-top:0; }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"]
      #commit-card:has(.commit-prog) .commit-count{ font-size:16px; }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"]
      #commit-card:has(.commit-prog) .commit-bar{ height:5px; }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"]
      #commit-card:has(.commit-prog) .commit-edit{
      position:absolute; right:5px; top:50%; width:32px; height:32px;
      translate:0 -50%; text-align:center;
    }
  }
  @media (max-height:570px){
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"] .ring-wrap{
      width:188px; height:188px;
    }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"] .timer{
      padding-top:2px;
    }
  }
  /* Small laptop/browser chrome can leave less than 520px to an extension
     popup. Tighten the supporting rows, but keep the timer visually dominant. */
  @media (max-height:520px){
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"].on{
      padding-block:6px;
    }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"] .hud{
      min-height:40px; padding-block:4px; margin-bottom:5px;
    }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"] .hud-lvl{
      width:28px; height:28px;
    }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"]
      :is(.capture-banner,.review-queued){
      min-height:22px; padding-block:0 4px; margin-bottom:4px;
    }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"] .focus-top{
      min-height:34px;
    }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"] .task-pick select{
      height:34px;
    }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"] .timer{
      padding-top:0;
    }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"] #cycle-dots{
      margin:4px 0 5px;
    }
    html:not(.view-full)[data-app-theme="handwritten"] .panel[data-panel="focus"]
      #commit-card:has(.commit-prog){
      min-height:40px; margin-top:5px; padding-block:4px;
    }
  }
  @media (prefers-reduced-motion: reduce){
    .ink-rider::before,.ink-rider::after{ transition:none; }
    .ink-rider:is(:hover,:focus-visible)::before{ animation:none; transform:none; }
    .brand-name:hover .brand-ledger::after,
    header:has(.ink-rider:focus-visible) .brand-ledger::after{ animation:none; }
    .ink-rider.block-complete .rider-hoofprint{ animation:none; opacity:1; }
    .ring-wrap,.tab.on,.stamp.brand-tag,.daily-tally,#reset,#skip{ rotate:0deg; }
    html[data-app-theme="handwritten"] body.is-running::after,.brand-ledger::after,
    html[data-app-theme="handwritten"] body.is-running[data-mode="focus"]
      .panel[data-panel="focus"].on :is(.ring-wrap,#start),
    body.is-running .ring-wrap::after,
    .daily-tally.inked .tally-group:last-child,
    .kb-card.done-just::before{ animation:none; }
    html[data-app-theme="handwritten"] body::after{
      transition:none; transform:var(--mood-transform); will-change:auto;
    }
  }
  @media (forced-colors:active){
    html:not(.view-full):not(.web-shell) nav .tab.on{ border-color:Highlight; }
    html[data-app-theme="handwritten"] body::after{ display:none; }
    html[data-app-theme="handwritten"] body::before{ display:none; }
    html.view-full[data-app-theme="handwritten"]{ background:Canvas; }
    html[data-app-theme="handwritten"] body{ background-image:none; }
    html.view-full[data-app-theme="handwritten"]::before,
    html.view-full[data-app-theme="handwritten"]::after,
    html[data-app-theme="handwritten"] :is(.frontier-sunset,.frontier-trail,#frontier-scene){ display:none; }
    .cowboy-landscape[aria-pressed="true"]{ border-color:Highlight; outline:2px solid Highlight; outline-offset:-3px; }
    .cowboy-landscape:focus-visible{ outline:3px dashed Highlight; outline-offset:3px; }
  }
  @media print{
    html[data-app-theme="handwritten"] body::before{ display:none; }
    html.view-full[data-app-theme="handwritten"]{ background:var(--bg); }
    html[data-app-theme="handwritten"] body{ background-image:none; box-shadow:none; }
    html.view-full[data-app-theme="handwritten"]::before,
    html.view-full[data-app-theme="handwritten"]::after,
    html[data-app-theme="handwritten"] :is(.frontier-sunset,.frontier-trail,#frontier-scene){ display:none; }
  }

  /* Supporting surfaces stay quiet around the timer and primary actions. */
  .hud,.commit,.onboard,.panel > .card,.stats-view > .card,.kb-card,.kb-col{
    background-color:var(--surface);
    border-color:rgba(31,43,61,.2); border-radius:12px;
    box-shadow:0 3px 12px rgba(31,43,61,.035);
  }
  #week-review,#commit-card{ background:transparent; box-shadow:none; }
  #hud{ background:transparent; border:0; box-shadow:none; padding:8px 4px; }
  .kb-head{ font-size:13px; }
  .card h3{ border-bottom:1px solid var(--line); padding-bottom:10px; }
  .stats-view > .achievement-collection{ padding:16px; }
  .achievement-collection > summary{ font-family:var(--hand); font-size:16px; }
  .achievement-collection .collection-hint{ font-family:var(--ui); }
  .tp-group-timers .tp-row{ background:var(--surface); }

  /* Focus hierarchy: the timer leads; planning and reminders support it. */
  body:has(#panel-focus.on)::after{ display:none; }
  #panel-focus .ring-wrap::after{ content:none; }
  #panel-focus .task-pick{ flex:1; }
  #panel-focus .task-pick select{
    width:100%; max-width:100%;
    min-height:44px; padding-inline:12px 32px;
  }
  #panel-focus .ssettings-toggle{ min-width:44px; min-height:44px; }
  #panel-focus .controls{ gap:12px; }
  #panel-focus .focus-context{ border-top:1px solid var(--line); margin-top:20px; padding-top:20px; }
  #panel-focus #daily-three{ padding:16px; border:1px solid var(--line); border-radius:12px; box-shadow:none; }
  #daily-three .ob-title{ font:650 19px/1.35 var(--hand); padding-right:36px; margin-bottom:6px; }
  #daily-three .ob-text{ font:400 13px/1.5 var(--ui); color:var(--soft); }
  #daily-three .d3-x{ top:6px; right:6px; width:44px; height:44px; font-size:16px; }
  #daily-three .d3-list{ margin-top:12px; max-height:220px; border-color:var(--line); }
  #daily-three .vz-lane{ min-height:44px; padding:10px 12px; font:400 14px/1.4 var(--ui); }
  #daily-three .vz-lane > span:not(.d3-pill){ min-width:0; overflow-wrap:anywhere; }
  #daily-three .vz-lane input{ width:18px; height:18px; }
  #daily-three .d3-carry{ flex-wrap:wrap; gap:8px; margin:12px 0; font-size:12px; }
  #daily-three .d3-carry span{ white-space:normal; overflow:visible; overflow-wrap:anywhere; flex:1 1 150px; }
  #daily-three .d3-carry-go{ min-height:36px; }
  #daily-three .d3-edit{ min-height:44px; font-size:13px; }
  #daily-three .vz-lane-add{ margin-top:12px; gap:8px; }
  #daily-three .vz-lane-add input{ min-height:44px; border:1px solid var(--line); border-radius:8px; box-shadow:none; font:400 14px var(--ui); }
  #daily-three .vz-lane-add-btn{ min-height:44px; border:0; border-radius:8px; box-shadow:none; font:600 14px var(--ui); }
  #panel-focus :is(#capture-banner,#why-prompt){ white-space:normal; overflow:visible; font-size:13px; line-height:1.5; min-height:44px; }
  #panel-focus :is(#commit-card,#week-review) > summary{ min-height:44px; flex-wrap:wrap; font-size:13px; }
  #panel-focus :is(#commit-card,#week-review) > summary small{ font-size:12px; }
  html:not(.view-full) nav .tab{ min-height:44px; }
  @media(min-width:901px){
    html.view-full #panel-focus .focus-context{ border-top:0; margin-top:0; padding-top:0; }
  }

  #panel-focus .focus-context{ border-top:0; padding-top:0; }
  #panel-focus #focus-plan .focus-plan-content > .onboard{ box-shadow:none; }
  #panel-focus #focus-plan > summary{ border:0; background:none; }

  #panel-focus #focus-plan #daily-three{ border:0; box-shadow:none; padding:0; }
  @media(min-width:1280px){
    /* One clear timer between two supporting notebook panels. */
    html.web-shell.view-full #panel-focus .focus-context{ margin-top:0; }
    html.web-shell.view-full #panel-focus #focus-plan > summary strong{ font:700 18px/1.5 var(--hand); }
    html.web-shell.view-full #panel-focus #daily-three .d3-list{ border:0; border-radius:0; margin-top:8px; }
    html.web-shell.view-full #panel-focus #daily-three .vz-lane{ padding:12px 0; min-height:48px; }
    html.web-shell.view-full #panel-focus .timer{ padding-top:12px; }
    html.web-shell.view-full #panel-focus .timer #time{ font-size:64px; }
    html.web-shell.view-full #panel-focus .timer .ring-wrap[data-timer-style="campfire"]{ width:300px; max-width:100%; }
    html.web-shell.view-full #panel-focus #ink-caption{ margin-top:8px; }
    html.web-shell.view-full #panel-focus #cycle-dots{ margin:8px 0 0; }
    html.web-shell.view-full #panel-focus .controls{ margin-top:8px; }
    /* Daily progress already lives in the editable Today row and rider trail. */
    html.web-shell.view-full #panel-focus #daily-tally{ display:none; }
    html.web-shell.view-full #panel-focus .frontier-trail-heading{ display:none; }
  }
  #panel-focus .controls :is(button.ctl,#start){ min-height:44px; }

  /* Campfire parts are vector ink on the paper, never a rectangular image. */
  html #panel-focus .timer .ring-wrap[data-timer-style="campfire"]{
    display:flex; flex-direction:column; align-items:center; width:280px; max-width:100%; height:auto;
  }
  .ring-wrap[data-timer-style="campfire"] > svg:not(#campfire-dial){ display:none; }
  .ring-wrap[data-timer-style="campfire"] .ring-center{ display:contents; }
  .ring-wrap[data-timer-style="campfire"] #time{ order:0; }
  .ring-wrap[data-timer-style="campfire"] #mode-label{ order:1; }
  html #panel-focus .timer .ring-wrap[data-timer-style="campfire"] #campfire-dial{
    display:block; order:2; width:100%; height:auto; aspect-ratio:320 / 230; margin-top:8px;
  }
  .ring-wrap[data-timer-style="campfire"] #ink-caption{ order:3; margin-top:4px; }
  .ring-wrap[data-timer-style="campfire"] #mode-label{
    display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px;
    color:var(--soft); line-height:1.5;
  }
  .session-state,.session-bonus{
    display:inline-flex; align-items:center; gap:4px; padding:2px 8px;
    border:1px solid var(--line); border-radius:6px;
    font:600 12px/1.5 var(--ui); letter-spacing:0;
  }
  .session-state{ background:var(--surface2); color:var(--ink); }
  .session-state.complete{ background:var(--good-dim); color:var(--good); }
  .session-bonus{ background:var(--highlighter); color:var(--ink); }
  html:not(.view-full):not(.web-shell) #panel-focus .timer .ring-wrap[data-timer-style="campfire"]{
    width:100%; rotate:0deg;
  }
  html:not(.view-full):not(.web-shell) #panel-focus .timer .ring-wrap[data-timer-style="campfire"] #time{
    font-size:50px; line-height:1.1;
  }
  html:not(.view-full):not(.web-shell) #panel-focus .timer .ring-wrap[data-timer-style="campfire"] #campfire-dial{
    width:clamp(150px,35vh,210px); max-width:75%; margin-top:10px;
  }
  html:not(.view-full):not(.web-shell) #panel-focus .controls{ margin-top:10px; }
  html:not(.view-full):not(.web-shell) #panel-focus .focus-context{ margin-top:12px; }
  @media (max-height:520px){
    html:not(.view-full):not(.web-shell) #panel-focus .timer .ring-wrap[data-timer-style="campfire"] #campfire-dial{
      width:clamp(110px,27vh,140px); margin-top:6px;
    }
  }
  .campfire-dial{ --camp-wash:#f2aa43; --fire-height:1; --ember-heat:.25; }
  .campfire-dial[data-mode="short"]{ --camp-wash:#a8baca; }
  .campfire-dial[data-mode="long"]{ --camp-wash:#b7a2cc; }
  .fire-wash{ stop-color:var(--camp-wash); }
  .fire-night{ display:none; }
  html[data-daylight="night"] .campfire-dial .fire-night{ display:block; }
  .fire-moon{ fill:#f6df9c; stroke:var(--ink); stroke-width:1.3; stroke-linejoin:round; }
  .fire-stars{ fill:none; stroke:var(--ink); stroke-width:1.1; stroke-linecap:round; }
  .fire-ground{ fill:none; stroke:#766447; stroke-width:1.2; stroke-linecap:round; opacity:.45; }
  .fire-stones{ fill:#afa898; stroke:#766c5c; stroke-width:.7; opacity:.8; }
  .fire-embers{ opacity:var(--ember-heat); }
  .fire-embers ellipse{ fill:#e67338; }
  .fire-embers path{ stroke:#f2b842; stroke-width:3; stroke-linecap:round; }
  .fire-hover-hit{ fill:transparent; pointer-events:all; forced-color-adjust:none; }
  .fire-hover-glow,.fire-hover-coals{ opacity:0; pointer-events:none; transition:opacity .18s ease; }
  .fire-hover-coals{ fill:#ffd483; }
  .fire-heat{ transform:scaleY(var(--fire-height)); transform-origin:160px 181px; }
  .fire-tongue{ animation:campfire-lick 2.77s ease-in-out infinite; animation-play-state:paused; }
  .fire-tongue-left{ transform-origin:125px 181px; animation-duration:2.13s; animation-delay:-.7s; }
  .fire-tongue-center{ transform-origin:160px 181px; animation-delay:-1.8s; }
  .fire-tongue-right{ transform-origin:187px 181px; animation-duration:3.31s; animation-delay:-1.1s; }
  .fire-outer{ stroke:none; }
  .fire-middle{ fill:#eaaa52; opacity:.5; }
  .fire-core{ fill:#fff0b8; opacity:.8; }
  .fire-highlight{ fill:none; stroke:#ffdd78; stroke-width:2; stroke-linecap:round; opacity:.7; }
  .fire-log{ --log-burn:0; --log-char-percent:0%; --log-heat:0; }
  .log-body{ stroke:#493d31; stroke-width:.8; stroke-linejoin:round; }
  .log-char{ opacity:var(--log-burn); }
  .log-firelight{ fill:none; stroke:color-mix(in srgb,#a18b70 var(--log-char-percent),#d1ad70); stroke-width:1; stroke-linecap:round; opacity:calc(.45 - var(--log-burn) * .28); }
  .log-flare{ fill:none; stroke:#ffd58a; stroke-width:1.7; stroke-linecap:round; opacity:0; pointer-events:none; }
  .log-grain,.log-ring{ fill:none; stroke:#3e342a; stroke-width:1.1; stroke-linecap:round; }
  .log-grain{ opacity:calc(.65 - var(--log-burn) * .5); }
  .log-cracks{ fill:none; stroke:#8c7c69; stroke-width:.8; stroke-linecap:round; opacity:var(--log-burn); }
  .log-ring{ stroke:color-mix(in srgb,#a18b70 var(--log-char-percent),#493729); }
  .log-coal{ fill:none; stroke-linecap:round; stroke-linejoin:round; opacity:var(--log-heat); }
  .log-glow{ stroke:#f06b26; stroke-width:3.5; opacity:.35; }
  .log-hot{ stroke:#ffc465; stroke-width:1; }
  .log-end{ fill:color-mix(in srgb,#39332f var(--log-char-percent),#9d8867); stroke:#4c3c2d; stroke-width:.8; }
  .fire-sparks{ fill:#e9942c; opacity:0; }
  .fire-spark{ animation:campfire-sparks 3.6s ease-out infinite; animation-play-state:paused; }
  .fire-spark:nth-child(2){ animation-duration:4.7s; animation-delay:-1.3s; }
  .fire-spark:nth-child(3){ animation-duration:5.3s; animation-delay:-2.6s; }
  .campfire-dial[data-state="RUNNING"][data-mode="focus"] :is(.fire-tongue,.fire-sparks){ animation-play-state:running; }
  .campfire-dial[data-state="RUNNING"][data-mode="focus"] .fire-sparks{ opacity:1; }
  .campfire-dial[data-state="RUNNING"][data-mode="focus"] .fire-spark{ animation-play-state:running; }
  .campfire-dial[data-mode="focus"] .fire-embers{ animation:focus-ember-light 4.3s ease-in-out infinite; animation-play-state:paused; }
  .campfire-dial[data-state="RUNNING"][data-mode="focus"] .fire-embers{ animation-play-state:running; }
  /* A pointer gust affects the flame layer; the five logs keep their original geometry. */
  @media(hover:hover) and (pointer:fine){
    .campfire-dial .fire-interaction:hover .fire-hover-glow{ opacity:.8; }
    .campfire-dial .fire-interaction:hover .fire-hover-coals{ opacity:.4; }
  }
  @media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
    .campfire-dial .fire-flames{ transform-box:view-box; transform-origin:160px 181px; transition:transform .15s var(--ease-out); }
    .campfire-dial .fire-sparks{ pointer-events:none; transition:opacity .15s ease,transform .18s var(--ease-out); }
    .campfire-dial[data-mode="focus"]:not([data-state="COMPLETE"]) .fire-interaction:hover .fire-sparks{ opacity:1; }
    .campfire-dial[data-mode="focus"]:not([data-state="COMPLETE"]) .fire-interaction:hover .fire-spark{ animation-play-state:running; }
  }
  .fire-gust-particles{ pointer-events:none; }
  .fire-gust-ember,.fire-gust-tail{ transform-box:view-box; transform-origin:0 0; }
  .fire-gust-tail{ fill:none; stroke:#d89543; stroke-width:1.2; stroke-linecap:round; opacity:.65; }
  .fire-gust-core{ fill:#ffe0a0; stroke:#d18b3b; stroke-width:.4; }
  .campfire-dial .fire-interaction.is-stoked :is(.fire-flames,.fire-sparks,.fire-hover-glow,.fire-hover-coals){ transition:none; }
  /* Breaks visibly smolder: warm cracks across the logs and rising smoke. */
  .campfire-dial:is([data-mode="short"],[data-mode="long"]) .fire-embers{
    --rest-glow:var(--ember-heat);
    animation:break-ember-glow 3.8s ease-in-out infinite; animation-play-state:paused;
  }
  .campfire-dial:is([data-mode="short"],[data-mode="long"]) :is(.log-coal,.log-cracks){
    animation:break-log-glow 3.8s ease-in-out infinite; animation-play-state:paused;
  }
  .campfire-dial:is([data-mode="short"],[data-mode="long"]) .log-cracks{ stroke:#f8a644; stroke-width:1.4; }
  .campfire-dial:is([data-mode="short"],[data-mode="long"]) .log-glow{ stroke-width:5; opacity:.6; }
  .campfire-dial:is([data-mode="short"],[data-mode="long"]) .log-hot{ stroke-width:1.8; }
  .campfire-dial:is([data-mode="short"],[data-mode="long"]) [data-fire-log="1"] :is(.log-coal,.log-cracks){ animation-delay:-.75s; }
  .campfire-dial:is([data-mode="short"],[data-mode="long"]) [data-fire-log="2"] :is(.log-coal,.log-cracks){ animation-delay:-1.5s; }
  .campfire-dial:is([data-mode="short"],[data-mode="long"]) [data-fire-log="3"] :is(.log-coal,.log-cracks){ animation-delay:-2.25s; }
  .campfire-dial:is([data-mode="short"],[data-mode="long"]) [data-fire-log="4"] :is(.log-coal,.log-cracks){ animation-delay:-3s; }
  .break-smoke{ display:none; fill:none; stroke:var(--soft); stroke-width:2; stroke-linecap:round; }
  .campfire-dial:is([data-mode="short"],[data-mode="long"]) .break-smoke{ display:block; }
  .break-smoke path{ opacity:0; animation:break-smoke-rise 4.8s ease-in-out infinite; animation-play-state:paused; }
  .break-smoke path:nth-child(2){ animation-delay:-1.6s; }
  .break-smoke path:nth-child(3){ animation-delay:-3.2s; }
  .campfire-dial[data-state="RUNNING"]:is([data-mode="short"],[data-mode="long"]) :is(.fire-embers,.log-coal,.log-cracks,.break-smoke path){ animation-play-state:running; }
  .campfire-dial[data-state="COMPLETE"] .fire-heat,
  .campfire-dial:not([data-mode="focus"]) .fire-heat{ opacity:0; }
  /* Inactive panels don't spend time painting a fire. */
  #panel-focus:not(.on) .campfire-dial :is(.fire-tongue,.fire-sparks,.fire-spark){ animation-play-state:paused; }
  #panel-focus:not(.on) .campfire-dial :is(.fire-embers,.log-coal,.log-cracks,.break-smoke path){ animation-play-state:paused; }
  @keyframes focus-ember-light{
    0%,100%{ opacity:calc(var(--ember-heat) * .8); }
    38%{ opacity:var(--ember-heat); }
    71%{ opacity:calc(var(--ember-heat) * .9); }
  }
  @keyframes break-ember-glow{
    0%,100%{ opacity:calc(var(--rest-glow) * .3); }
    50%{ opacity:var(--rest-glow); }
  }
  @keyframes break-log-glow{
    0%,100%{ opacity:.18; }
    50%{ opacity:1; }
  }
  @keyframes break-smoke-rise{
    0%{ opacity:0; transform:translate(-3px,8px); }
    25%{ opacity:.45; }
    60%{ opacity:.35; }
    100%{ opacity:0; transform:translate(5px,-18px); }
  }
  @keyframes campfire-lick{
    0%,100%{ transform:skewX(-.7deg) scaleY(1); }
    18%{ transform:skewX(1.1deg) scaleY(1.035); }
    41%{ transform:skewX(-1.8deg) scaleY(.97); }
    67%{ transform:skewX(.4deg) scaleY(1.015); }
    84%{ transform:skewX(1.4deg) scaleY(.99); }
  }
  @keyframes campfire-sparks{
    0%{ transform:translateY(8px); opacity:0; }
    25%{ opacity:.7; }
    100%{ transform:translate(5px,-15px); opacity:0; }
  }
  #campfire-preview-moods:not([hidden]){ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:12px; }
  #campfire-preview-moods button{
    min-height:44px; padding:8px 12px; border:1px solid var(--line); border-radius:8px;
    background:var(--surface); color:var(--ink); font:500 12px var(--ui); cursor:pointer;
  }
  #campfire-preview-moods button:hover{ border-color:var(--line2); }
  #campfire-preview-moods button[aria-pressed="true"]{ background:var(--highlighter); color:var(--ink); }
  @media(prefers-reduced-motion:reduce){
    .campfire-dial .fire-flames{ transform:none; transition:none; }
    .campfire-dial .fire-gust-particles{ display:none; }
    .campfire-dial :is(.fire-tongue,.fire-sparks){ animation:none; }
    .campfire-dial :is(.fire-spark,.fire-embers){ animation:none; }
    .campfire-dial[data-mode="focus"] .fire-embers{ animation:none; }
    .campfire-dial:is([data-mode="short"],[data-mode="long"]) :is(.fire-embers,.log-coal,.log-cracks,.break-smoke path){ animation:none; }
    .break-smoke{ display:none !important; }
    .campfire-dial .fire-sparks{ display:none; }
  }
  @media(forced-colors:active){
    .fire-atmosphere,.fire-hover-glow,.fire-hover-coals,.fire-gust-particles,.fire-sparks,.fire-embers,.log-coal,.log-firelight,.log-flare,.break-smoke{ display:none !important; }
    .log-body,.log-end,.log-char{ fill:Canvas; stroke:CanvasText; }
    .fire-outer,.fire-middle,.fire-core,.fire-moon{ fill:Canvas; stroke:CanvasText; }
    .log-grain,.log-ring,.log-cracks,.log-hot,.fire-ground,.fire-stars{ stroke:CanvasText; }
  }