/* ═══════════════════════════════════════════════════════════════════
SITHIYAM · THE ISLAND — lane-b-island.css (D2 kit)
Page-scoped, hosted as a Webflow asset + . NEVER author these as Webflow styles —
this is tokens/reset/keyframes/media + everything that lives inside JS-created or
runtime-injected SVG/DOM (no real canvas element exists for a Designer to select).
Mirrors home's lane-b-vN.css pattern exactly (see Website Redesign/HANDOVER.md M0 state).
═══════════════════════════════════════════════════════════════════ */
/* ============ TOKENS (shared v5 block, verbatim — GOVERNANCE §6.5) ============ */
:root{
--paper:oklch(0.969 0.012 84); --paper-2:oklch(0.946 0.015 80); --paper-3:oklch(0.912 0.018 77);
--paper-live:oklch(0.969 0.012 84);
--ink:oklch(0.205 0.018 56); --ink-2:oklch(0.44 0.022 58);
--line:oklch(0.205 0.018 56 / .16); --line-2:oklch(0.205 0.018 56 / .08);
--accent:oklch(0.70 0.115 73); --accent-ink:oklch(0.42 0.115 60);
--terra:oklch(0.63 0.135 44); --tea:oklch(0.52 0.072 156);
--night:oklch(0.205 0.02 58); --night-2:oklch(0.25 0.022 60); --bone:oklch(0.93 0.014 82);
--pencil:oklch(0.36 0.06 58);
--f-display:"Bricolage Grotesque",sans-serif; --f-serif:"Instrument Serif",serif;
--f-mono:"JetBrains Mono",monospace; --f-hand:"La Belle Aurore",cursive; --f-scrawl:"Caveat",cursive;
--f-sinh:"Noto Serif Sinhala",serif;
--ease:cubic-bezier(.22,1,.36,1); --slow:cubic-bezier(.16,1,.3,1);
--gutter:clamp(20px,5vw,84px);
--lamp:0;
/* aliases: island-cms.js accents -> v5 tokens (data file untouched, per GOVERNANCE §6.5) */
--gold:var(--accent); --green:var(--tea);
}
*{margin:0;padding:0;box-sizing:border-box}
html body{background:var(--paper);color:var(--ink);font-family:var(--f-display);overflow-x:hidden}
::selection{background:var(--accent);color:var(--night)}
img{display:block;max-width:100%} a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
/* ============ KEYFRAMES ============ */
@keyframes writein{0%{clip-path:inset(-20% 102% -20% -2%);opacity:1}100%{clip-path:inset(-20% -2% -20% -2%);opacity:1}}
@keyframes twinkle{20%{opacity:.9}60%{opacity:.15}}
@keyframes fade{to{opacity:1}}
@keyframes rise{to{transform:translateY(0)}}
@keyframes dash620{to{stroke-dashoffset:0}}
@keyframes rosedraw{to{stroke-dashoffset:0}}
@keyframes dockin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes wavebob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@keyframes pinpulse{0%{transform:scale(1);opacity:.75}100%{transform:scale(2.5);opacity:0}}
@keyframes ringdraw{to{stroke-dashoffset:0}}
@keyframes needlesway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(6deg)}}
/* ============ DOCK MODE VISIBILITY (JS toggles .m-browse/.m-place/.m-tour on #dock;
the 3 named children swap via id, not class — a pure state mechanism, lane-b) ============ */
.isl-dock>*{display:none}
.isl-dock.m-browse #dockBrowse{display:flex}
.isl-dock.m-place #flyout{display:block;animation:dockin .45s var(--slow)}
.isl-dock.m-tour #tourbar{display:flex;animation:dockin .45s var(--slow)}
/* ============ TYPE PILLS + CHIPS (100% JS-created into #toolTypes/#toolChips at boot —
Object.keys(D.TYPES).forEach()/chipGroup() — no real canvas element to select) ============ */
.isl-typepill{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:100px;padding:9px 14px;transition:opacity .3s var(--ease),border-color .3s var(--ease)}
.isl-typepill:hover{border-color:var(--ink-2)}
.isl-typepill .sw{width:10px;height:10px;flex:none;background:var(--c);border:1px solid var(--ink);transition:background .25s}
.isl-typepill[data-glyph="circle"] .sw{border-radius:50%}
.isl-typepill[data-glyph="diamond"] .sw{transform:rotate(45deg);border-radius:2px}
.isl-typepill[data-glyph="square"] .sw{border-radius:2px}
.isl-typepill b{font-size:.78rem;font-weight:600}
.isl-typepill .n{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.1em;color:var(--ink-2)}
.isl-typepill.off{opacity:.4;border-style:dashed}
.isl-typepill.off .sw{background:transparent}
.isl-chipgrp{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.isl-chipgrp .gl{font-family:var(--f-mono);font-size:.54rem;letter-spacing:.18em;color:var(--ink-2);margin-right:3px}
.isl-chip{font-family:var(--f-mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--line);border-radius:100px;padding:6px 10px;transition:all .25s var(--ease)}
.isl-chip:hover{border-color:var(--ink-2)}
.isl-chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
/* #count's innerHTML is fully overwritten by applyFilters() from boot onward */
.isl-count b{color:var(--ink)}
/* ============ decorative hairline (post-insert pseudo at D3, kept here for reference) ============ */
.isl-nav-link::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--accent-ink);transition:width .35s var(--ease)}
.isl-nav-link:hover::after{width:100%}
.isl-nav-link.is-here::after{width:100%;background:var(--accent)}
/* ============ #starfield i (JS-created stars) ============ */
#starfield i{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--bone);animation:twinkle 3.8s infinite}
body.has-cur, body.has-cur *{cursor:none!important}
/* ============ tripclock inner SVG (static, injected at runtime via isl-svg-islands.js) ============ */
.isl-tripclock .arcpath{fill:none;stroke:var(--line);stroke-width:1}
.isl-tripclock .orb{fill:var(--accent)}
body.is-night-mode .isl-tripclock .orb{fill:var(--bone)}
/* ============ hero compass rose (static, injected at runtime) ============ */
.isl-rose .rc{fill:none;stroke:var(--pencil);stroke-width:1.6;filter:url(#roughM);stroke-dasharray:660;stroke-dashoffset:660;animation:rosedraw 1.6s .5s var(--slow) forwards}
.isl-rose .rc2{stroke-width:1;opacity:.35;animation-delay:.8s}
.isl-rose .rt{stroke:var(--pencil);stroke-width:1.2;opacity:0;animation:fade .6s 1.7s var(--ease) forwards}
.isl-rose .rn{fill:var(--accent-ink);opacity:0;animation:fade .7s 1.5s var(--ease) forwards}
.isl-rose .rs{fill:none;stroke:var(--pencil);stroke-width:1.2;opacity:0;animation:fade .7s 1.6s var(--ease) forwards}
.isl-rose text{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;fill:var(--ink-2);opacity:0;animation:fade .6s 1.8s var(--ease) forwards}
.isl-fig-doodle path{fill:none;stroke:var(--pencil);stroke-width:1.4;stroke-linecap:round;opacity:.55;filter:url(#roughM)}
/* ============ THE CHART (100% JS-built into an empty