/* The hero's island (assets/island.js draws it on a canvas, the way the app does) and the small Settings window its
   gear opens. Fonts are the island's own; the window takes its colours and radii from the app's Settings
   (videos/_assets-v2/design/tokens.md: Settings window). */

@font-face { font-family: Geist; font-weight: 400; font-display: swap; src: url(fonts/geist-400.woff2) format("woff2"); }
@font-face { font-family: Geist; font-weight: 500; font-display: swap; src: url(fonts/geist-500.woff2) format("woff2"); }
@font-face { font-family: Geist; font-weight: 600; font-display: swap; src: url(fonts/geist-600.woff2) format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 500; font-display: swap; src: url(fonts/geist-mono-500.woff2) format("woff2"); }

.isl-canvas { display: block; margin: 0 auto; outline: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.isl-canvas:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 12px; }

/* the hint under the island, until someone opens it */
.isl-hint { position: absolute; left: 50%; bottom: 30%; transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px;
            border-radius: 9999px; background: rgba(10, 20, 50, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font: 500 13px/1 Inter, system-ui, sans-serif;
            transition: opacity .4s; pointer-events: none; }
.isl-hint::before { content: ""; width: 6px; height: 6px; border-radius: 9999px; background: #fff; animation: isl-blink 1.6s ease-in-out infinite; }
.isl-hint.hide { opacity: 0; }
@keyframes isl-blink { 50% { opacity: .35; } }

/* a screenshot: the screen flashes white */
.isl-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 4; }
.isl-flash.go { animation: isl-flash .5s ease-out; }
@keyframes isl-flash { 0% { opacity: .85; } 100% { opacity: 0; } }

/* ---------- Settings: the app's window, smaller ---------- */
.isl-settings { --win: #0b0b0c; --paper: #efede8; --muted: #b9b6ae; --faint: #7d7b76;
  position: absolute; z-index: 3; left: 50%; top: 84px; width: min(520px, calc(100% - 24px)); transform: translateX(-50%); border-radius: 12px; overflow: hidden;
  background: var(--win); color: var(--paper); box-shadow: inset 0 0 0 1px rgba(239, 237, 232, .15), 0 24px 60px rgba(0, 20, 60, .35);
  font: 400 12px/1.4 Geist, Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; animation: isl-pop .28s cubic-bezier(.2, .9, .3, 1.1); }
.isl-settings[hidden] { display: none; }
@keyframes isl-pop { from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.98); } }
.isl-settings .bar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 14px; border-bottom: 1px solid rgba(239, 237, 232, .1); }
.isl-settings .bar img { border-radius: 5px; }
.isl-settings .bar b { font-weight: 600; font-size: 13px; letter-spacing: -.01em; }
.isl-settings .ver { font: 400 10.5px/1 "Geist Mono", ui-monospace, monospace; color: var(--faint); }
.isl-settings .x { margin-left: auto; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); background: none; border: 0; cursor: pointer; }
.isl-settings .x:hover { background: rgba(239, 237, 232, .07); color: var(--paper); }
.isl-settings .x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
.isl-settings .body { padding: 10px 16px 6px; max-height: 330px; overflow-y: auto; }
.isl-settings .kick { margin: 2px 0 4px; font: 400 10.5px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.isl-settings .row { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-bottom: 1px solid rgba(239, 237, 232, .1); }
.isl-settings .row:last-child { border-bottom: 0; }
.isl-settings .t b { display: block; font-weight: 500; font-size: 13px; }
.isl-settings .t span { display: block; color: var(--muted); font-size: 11.5px; }
.isl-settings .seg { display: inline-flex; flex-wrap: wrap; gap: 2px; align-self: flex-start; padding: 3px; border-radius: 17px; box-shadow: inset 0 0 0 1px rgba(239, 237, 232, .15); }
.isl-settings .seg button { height: 26px; padding: 0 11px; border-radius: 14px; border: 0; background: none; color: var(--muted); font: 500 12px/1 Geist, Inter, sans-serif; cursor: pointer; transition: background .15s, color .15s; }
.isl-settings .seg button:hover { background: rgba(239, 237, 232, .07); color: var(--paper); }
.isl-settings .seg button[aria-pressed="true"] { background: var(--paper); color: #0c0c0e; }
.isl-settings .seg button[aria-pressed="true"]:hover { background: #dcd9d2; }

/* on a phone the hero is too short to hold it: a sheet along the bottom of the screen instead */
@media (max-width: 640px) {
  .isl-settings { position: fixed; top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; transform: none; z-index: 60; animation-name: isl-sheet; }
  .isl-settings .body { max-height: 58vh; }
}
@keyframes isl-sheet { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .isl-hint::before { animation: none; } .isl-settings { animation: none; } }