:root{
    color-scheme: light;
    --ink:#1e2e4a;
    --ink-soft:#33496b;
    --muted:#5f7191;
    --hair:#c3dcf5;
    --hair-dark:#8fb8e6;
    --panel:#f0f7ff;
    --accent:#1595d6;
    --accent-pale:#dcecfb;
    --accent-deep:#1d5fa3;
    --pink:#ff5f9e;
    --pink-dark:#cf3670;
    --pink-pale:#fdeef5;
    --eblue:#2fb9f0;
    --eblue-bright:#4cc9f5;
    --eblue-dark:#0e7fc0;
    --eblue-pale:#e2f6fc;
    --purple:#8b7cf0;
    --violet:#9b7bff;
    --violet-pale:#efeaff;
    --pop-pink:#ff5f9e;
    --pop-eblue:#2fb9f0;
    --navy:#17294e;
    --ui:"Baloo 2","Hiragino Maru Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;
    --sans:var(--ui);
    --mono:ui-monospace,"SF Mono","Courier New",Courier,monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%;overflow-x:clip}
  body{
    font-family:var(--ui);
    font-weight:500;
    color:var(--ink);
    background:#eef6ff;
    min-height:100vh;
  }
  .page{max-width:760px;margin:0 auto;padding:0 22px}

  /* ---------- falling pop shapes (flat matte ♥ ★ ✦, all pages) ---------- */
  .sparkle-layer{
    position:fixed;inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:60;
    opacity:.95;
  }
  .sparkle{
    position:absolute;
    top:-30px;
    left:var(--x);
    line-height:1;
    opacity:0;
    pointer-events:none;
    animation:sparkle-fall var(--dur) linear infinite;
    animation-delay:var(--delay);
    will-change:transform,opacity;
  }
  .sparkle-inner{
    display:block;
    color:var(--c);
    font-size:var(--size);
    line-height:1;
    text-shadow:none;
    animation:
      sparkle-sway var(--sway-dur) ease-in-out infinite alternate,
      sparkle-twinkle var(--twinkle-dur) ease-in-out infinite alternate;
    animation-delay:var(--sway-delay),var(--twinkle-delay);
    will-change:transform,opacity;
  }
  @keyframes sparkle-fall{
    0%{transform:translate3d(0,-4vh,0);opacity:0}
    7%{opacity:1}
    93%{opacity:1}
    100%{transform:translate3d(var(--drift),108vh,0);opacity:0}
  }
  @keyframes sparkle-sway{
    from{transform:translateX(-9px) rotate(-16deg)}
    to{transform:translateX(9px) rotate(16deg)}
  }
  @keyframes sparkle-twinkle{
    from{opacity:.45;scale:.78}
    to{opacity:1;scale:1.12}
  }
  @keyframes accent-twinkle{
    from{opacity:.45;transform:scale(.78) rotate(-10deg)}
    to{opacity:1;transform:scale(1.18) rotate(10deg)}
  }
  @media (prefers-reduced-motion: reduce){
    .sparkle-layer{display:none}
    .burst-layer{display:none}
    .hero-orbit{display:none}
    .menu-panel,.menu-backdrop{transition:none}
    .loader,.ring-prog{transition:none}
    .hero-card{animation:none !important}
    .wordmark-img{animation:none !important}
    .site-header::after{display:none}
    .copy-all-full::before,.copy-all-full::after{display:none}
    .hero-pill::before,.hero-pill::after,
    .char-name::before,.char-name::after,
    .wordmark-star,
    .profile-name::before,.profile-name::after{animation:none !important}
  }

  /* ---------- tap sparkle burst ---------- */
  .burst-layer{
    position:fixed;inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:70;
  }
  .burst-spark{
    position:absolute;
    line-height:1;
    pointer-events:none;
    will-change:transform,opacity;
    animation:burst-pop var(--bdur,.7s) ease-out forwards;
    text-shadow:none;
  }
  @keyframes burst-pop{
    0%{transform:translate(-50%,-50%) scale(.35) rotate(0deg);opacity:1}
    100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.05) rotate(var(--rot));opacity:0}
  }

  /* ---------- slim header (reference-style sky bar) ---------- */
  .site-header{
    position:sticky;top:0;z-index:50;
    overflow:hidden;
    background:#fff;
    box-shadow:0 4px 16px rgba(120,110,200,.14);
    border-bottom:none;
  }
  .site-header::before{content:none}
  /* Bottom edge of the header: four flat solid stripes in the
     logo colours (electric blue | violet | hot pink | electric
     blue) — segmented flat blocks, no blending. */
  .header-stripes{
    position:absolute;left:0;right:0;bottom:0;height:4px;
    display:flex;
    pointer-events:none;z-index:2;
  }
  .header-stripes i{flex:1 1 0;display:block}
  .header-stripes i:nth-child(1){background:#2fb9f0}
  .header-stripes i:nth-child(2){background:#8b7cf0}
  .header-stripes i:nth-child(3){background:#ff5f9e}
  .header-stripes i:nth-child(4){background:#2fb9f0}
  .site-header::after{content:none}
  .site-header-in{
    position:relative;z-index:1;
    max-width:960px;margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:10px 16px;
  }
  .wordmark{
    cursor:pointer;
    display:inline-flex;align-items:center;gap:6px;
    text-decoration:none;
    font-family:var(--ui);
    line-height:1;
  }
  .wordmark-spark{
    display:inline-block;
    font-size:20px;
    line-height:1;
    color:#ff5f9e;
  }
  /* The wordmark is the user's own logo artwork as-is (glossy
     bubble graffiti lettering on white, matching the white
     header) — no CSS text tricks. Its sparkle and heart
     decorations are part of the artwork, so no flanking
     glyphs sit next to it in the markup. */
  .wordmark-img{
    display:block;
    height:27px;
    width:auto;
    animation:wordmark-float 3.6s ease-in-out infinite;
    will-change:transform;
  }
  @keyframes wordmark-float{
    0%,100%{transform:translateY(0) rotate(0deg)}
    50%{transform:translateY(-2px) rotate(.6deg)}
  }
  .wordmark-star{
    display:inline-block;
    font-size:11px;
    line-height:1;
    color:#2fb9f0;
    animation:accent-twinkle 2.4s ease-in-out infinite alternate;
  }
  .wordmark:focus-visible{outline:2px dashed #8b7cf0;outline-offset:3px;border-radius:999px}
  .header-right{display:flex;align-items:center;gap:10px;transform:translateY(-3px)}
  .sound-toggle{
    flex:none;display:flex;align-items:center;justify-content:center;
    width:36px;height:32px;padding:0;
    background:#fff;border:3px solid var(--eblue);border-radius:999px;
    color:var(--eblue-dark);cursor:pointer;
    box-shadow:2.5px 2.5px 0 rgba(255,95,158,.45);
  }
  .sound-toggle:hover{background:var(--eblue-pale)}
  .sound-toggle svg{width:18px;height:18px;display:block}
  .sound-toggle .snd-off{display:none}
  .sound-toggle.off .snd-on{display:none}
  .sound-toggle.off .snd-off{display:block}
  .sound-toggle:focus-visible{outline:2px dashed #8b7cf0;outline-offset:2px}
  .menu-btn{
    flex:none;display:flex;align-items:center;justify-content:center;
    width:36px;height:32px;padding:0;
    background:#fff;border:3px solid #ff5f9e;cursor:pointer;
    border-radius:999px;
    color:#1d3a5f;
    box-shadow:2.5px 2.5px 0 rgba(47,185,240,.5);
  }
  .menu-btn svg{width:18px;height:18px;display:block}
  .menu-btn:hover{background:#fdeef5}
  .menu-btn:active{transform:translateY(1px)}
  .menu-btn:focus-visible{outline:2px dashed #8b7cf0;outline-offset:2px}

  /* ---------- first-visit loading screen ---------- */
  .loader{
    position:fixed;inset:0;z-index:200;
    background:#f2f8ff;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
    transition:opacity .45s ease, visibility 0s linear .45s;
  }
  .loader.done{opacity:0;visibility:hidden;pointer-events:none}
  .loader-ringwrap{position:relative;width:84px;height:84px}
  .loader-ring{width:84px;height:84px;transform:rotate(-90deg)}
  .loader-ring circle{fill:none;stroke-width:7;stroke-linecap:round}
  .ring-track{stroke:#dcecfb}
  .ring-prog{stroke:#ff5f9e;stroke-dasharray:226.2;stroke-dashoffset:226.2;transition:stroke-dashoffset .3s ease}
  .loader-star{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    font-size:26px;color:#2fb9f0;
  }
  .loader-text{
    font-family:var(--ui);font-weight:800;font-size:13px;
    letter-spacing:.34em;text-indent:.34em;color:#7a8db5;
  }

  /* ---------- menu: blue panel dropping from the top ---------- */
  .menu-overlay{
    position:fixed;inset:0;z-index:90;
    visibility:hidden;
    transition:visibility 0s linear .45s;
  }
  .menu-overlay.open{
    visibility:visible;
    transition-delay:0s;
  }
  .menu-backdrop{
    position:absolute;inset:0;
    background:rgba(23,41,78,.38);
    opacity:0;
    transition:opacity .3s ease;
  }
  .menu-overlay.open .menu-backdrop{opacity:1}
  .menu-panel{
    position:absolute;top:0;left:0;right:0;
    background:#2fb9f0;
    border-radius:0 0 28px 28px;
    box-shadow:0 12px 32px rgba(23,41,78,.28);
    padding:64px 24px 42px;
    overflow:hidden;
    transform:translateY(-104%);
    transition:transform .42s cubic-bezier(.25,.9,.3,1);
  }
  .menu-overlay.open .menu-panel{transform:translateY(0)}
  .menu-close{
    position:absolute;top:14px;right:16px;
    width:44px;height:44px;
    background:transparent;border:2.5px solid #fff;border-radius:50%;
    font-family:var(--ui);
    color:#fff;font-weight:800;
    font-size:15px;line-height:1;
    cursor:pointer;
  }
  .menu-close:hover{background:rgba(255,255,255,.16)}
  .menu-close:focus-visible{outline:2px dashed #fff;outline-offset:2px}
  .menu-list{display:flex;flex-direction:column;align-items:center;gap:2px}
  .menu-item{
    cursor:pointer;
    font-family:var(--ui);
    font-size:32px;font-weight:800;
    letter-spacing:.14em;
    text-indent:.14em;
    text-transform:uppercase;
    color:#fff;
    background:none;border:none;box-shadow:none;
    padding:9px 22px;
    transition:opacity .15s ease;
  }
  .menu-item:hover{opacity:.82}
  .menu-item:active{transform:translateY(1px)}
  .menu-item:focus-visible{outline:2px dashed #fff;outline-offset:2px}
  .menu-art{
    position:absolute;right:-12px;bottom:14px;
    width:118px;height:118px;
    opacity:.85;
    pointer-events:none;
  }
  .menu-stripes{
    position:absolute;left:0;right:0;bottom:0;height:4px;
    display:flex;
    pointer-events:none;
  }
  .menu-stripes i{flex:1 1 0;display:block}
  .menu-stripes i:nth-child(1){background:#ff5f9e}
  .menu-stripes i:nth-child(2){background:#8b7cf0}
  .menu-stripes i:nth-child(3){background:#fff}
  .menu-stripes i:nth-child(4){background:#ff5f9e}

  /* ---------- panels ---------- */
  .panel{display:none}
  .panel.active{display:block}
  .panel-sub{padding:26px 0 10px}

  /* ---------- page transition (corner wipe) ----------
     The incoming page's blocks pop in one after another like
     bubbles: each starts small and low, springs past its full
     size once (overshoot), wobbles and settles, staggered ~55ms
     apart so the page feels like it unfolds — poko, poko, poko.
     The keyframes animate the individual translate / scale
     properties (not transform), so on the Top page they compose
     with the collage cards' float animation — the float keeps
     running underneath and continues untouched after entry.
     Animations restart each time a panel flips from display:none
     to active, i.e. on every page switch. */
  /* A solid circle grows out of the bottom-right corner until it
     covers the screen; the page swaps underneath; then the sheet
     shrinks back into the corner. Driven from script.js (WAAPI). */
  .page-wipe{
    position:fixed;inset:0;
    z-index:300;
    pointer-events:none;
  }
  .wipe-layer{
    position:absolute;inset:0;
    clip-path:circle(0% at 100% 100%);
  }
  .wipe-layer.pink{background:var(--pink)}
  .wipe-layer.white{background:#fff}
  .wipe-layer.blue{background:var(--eblue)}

  /* ---------- top: hero banner + collage cards ---------- */
  /* The hero breaks out of the column to run full-bleed, edge to
     edge: the top banner illustration (1024x1536, opaque art)
     shown flat, at its natural aspect ratio — no cropping, no
     frame, no border, no radius. The four entry cards sit ON it
     as a collage (Profile top-left, Pesca right upper-middle,
     Mill left lower, Gallery anchored to the bottom-right, fully
     on the banner like the other three), each with its pill
     label straddling the bottom-right corner. Pesca and Mill
     go straight to their prompt pages — there is no Prompt
     hub in between. */
  .hero-wrap{
    position:relative;
    width:100vw;
    margin-left:calc(50% - 50vw);
    overflow:hidden;
  }
  /* The banner is 1024x1536, so the hero stands 150vw tall.
     The Gallery card is anchored with bottom:4% of that height
     (about 6vw), which leaves room for its pill — the pill
     straddles the card's bottom edge by half its height — so
     the whole card including the pill stays on the banner. */
  .hero-banner{
    position:relative;
    z-index:1;
    display:block;
    width:100%;
    height:auto;
  }
  /* Star orbit around Pesca on the top banner (inline SVG):
     a big tilted ellipse running from shoulder to waist. Only
     the front arc is stroked — the far side passes "behind"
     him — and the star riding the ring fades out while it
     travels the back arc. */
  .hero-orbit{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:2;
    pointer-events:none;
  }
  .orbit-line{
    fill:none;
    stroke:#fff;
    stroke-width:3;
    stroke-dasharray:50 50;
    stroke-dashoffset:50;
    opacity:.9;
  }
  .orbit-line-outer{
    stroke-width:1.5;
    opacity:.35;
  }
  .orbit-main{
    fill:#fff;
    stroke:rgba(23,41,78,.9);
    stroke-width:1.2;
    paint-order:stroke;
    font-size:76px;
    text-anchor:middle;
    dominant-baseline:central;
  }
  .orbit-flash{
    fill:#fff;
    font-size:118px;
    text-anchor:middle;
    dominant-baseline:central;
    opacity:0;
  }
  .orbit-sat{
    fill:#fff;
    text-anchor:middle;
    dominant-baseline:central;
  }
  .sat-a{font-size:34px}
  .sat-b{font-size:24px;fill:#ff8fbf}
  .hero-card{
    position:absolute;
    z-index:3;
    display:block;
    margin:0;
    padding:0;
    background:#fff;
    border:3px solid #2fb9f0;
    border-radius:28px;
    box-shadow:6px 6px 0 rgba(139,124,240,.35);
    cursor:pointer;
    font-family:var(--ui);
    color:var(--ink);
    transition:box-shadow .15s ease,filter .15s ease;
  }
  .hero-card:hover{box-shadow:7px 7px 0 rgba(255,95,158,.4)}
  .hero-card:focus-visible{outline:3px dashed var(--purple);outline-offset:3px}
  .hero-card img{
    display:block;width:100%;height:100%;
    object-fit:cover;
    border-radius:24px;
  }
  .hero-card-profile{left:4%;top:4%;width:32%;aspect-ratio:4/3;border-color:#2fb9f0;transform:rotate(-2deg);animation:hero-float-a 4.2s ease-in-out -.6s infinite}
  .hero-card-pesca{right:4%;top:34%;width:26%;aspect-ratio:1/1;border-color:#ff8fbf;box-shadow:6px 6px 0 rgba(255,95,158,.45);transform:rotate(2deg);animation:hero-float-b 3.6s ease-in-out -1.8s infinite}
  .hero-card-mill{left:4%;top:60%;width:26%;aspect-ratio:1/1;border-color:#2fb9f0;box-shadow:6px 6px 0 rgba(47,185,240,.45);transform:rotate(-2deg);animation:hero-float-c 4.6s ease-in-out -2.4s infinite}
  .hero-card-gallery{right:4%;bottom:4%;width:22%;aspect-ratio:1/1;border-color:#a78bfa;box-shadow:6px 6px 0 rgba(155,123,255,.4);transform:rotate(-1.5deg);animation:hero-float-d 3.9s ease-in-out -1.1s infinite}
  /* Gentle floating (ふよふよ): each card drifts up and down a few
     px with a whisper of rotation, swaying around its own base
     tilt (the rotate in the class above) so the collage keeps its
     hand-placed feel. Durations and negative delays differ per
     card so they never bob in sync. */
  @keyframes hero-float-a{
    0%,100%{transform:translateY(0) rotate(-2deg)}
    50%{transform:translateY(-5px) rotate(-1.1deg)}
  }
  @keyframes hero-float-b{
    0%,100%{transform:translateY(0) rotate(2deg)}
    50%{transform:translateY(-6px) rotate(2.9deg)}
  }
  @keyframes hero-float-c{
    0%,100%{transform:translateY(0) rotate(-2deg)}
    50%{transform:translateY(-4px) rotate(-2.8deg)}
  }
  @keyframes hero-float-d{
    0%,100%{transform:translateY(0) rotate(-1.5deg)}
    50%{transform:translateY(-5px) rotate(-.7deg)}
  }
  /* Every pill anchors to its card's bottom-right corner and grows
     leftwards. The longest label (Gallery) now sits on the
     bottom-right card, where that growth runs over the banner and
     stays on screen at any width, so no left-edge exception is
     needed: the bottom-left card is Mill now, whose short label
     fits inside its card from the right anchor. */
  .hero-pill{
    position:absolute;
    right:-10px;bottom:0;
    transform:translateY(50%);
    display:inline-block;
    white-space:nowrap;
    background:#8b7cf0;
    border:2.5px solid #fff;
    border-radius:999px;
    padding:6px 15px;
    font-size:12.5px;font-weight:800;
    line-height:1.3;
    letter-spacing:.06em;
    color:var(--ink);
    box-shadow:inset 0 2px 0 rgba(255,255,255,.5),3px 3px 0 rgba(51,64,107,.55);
    text-transform:uppercase;
  }
  .hero-card-profile .hero-pill{background:#8b7cf0}
  .hero-card-pesca .hero-pill{background:#ff5f9e}
  .hero-card-mill .hero-pill{background:#2fb9f0}
  .hero-card-gallery .hero-pill{background:#ff8fbf}
  .hero-pill::before{
    content:"★";
    display:inline-block;
    font-size:10px;
    margin-right:5px;
    vertical-align:.08em;
    color:#fff;
    text-shadow:none;
    animation:accent-twinkle 2.1s ease-in-out infinite alternate;
  }
  .hero-pill::after{
    content:"♥";
    display:inline-block;
    font-size:9px;
    margin-left:5px;
    vertical-align:.08em;
    color:#fff;
    text-shadow:none;
    animation:accent-twinkle 2.5s ease-in-out infinite alternate-reverse;
  }
  .hero-card-pesca .hero-pill::before{content:"♥"}
  .hero-card-pesca .hero-pill::after{content:"★"}
  .hero-card-mill .hero-pill::before{content:"✦"}
  .hero-card-gallery .hero-pill::before{content:"♥"}

  /* ---------- profile ---------- */
  .profile-col{max-width:440px;margin:0 auto;text-align:center}
  .profile-photo{
    display:block;
    width:168px;height:168px;
    object-fit:cover;
    margin:0 auto;
    border:5px solid #ff5f9e;
    background:#fff;
    border-radius:34px;
    box-shadow:7px 7px 0 rgba(255,95,158,.35);
  }
  .profile-name{
    margin-top:26px;
    font-size:38px;font-weight:800;
    letter-spacing:.14em;
    text-indent:.14em;
    line-height:1.1;
    color:#ff5f9e;
    text-transform:uppercase;
  }
  .profile-name::before{content:" ♥ ";display:inline-block;font-size:.62em;vertical-align:.35em;background:none;color:#ff5f9e;-webkit-text-fill-color:#ff5f9e;text-shadow:none;animation:accent-twinkle 2.2s ease-in-out infinite alternate}
  .profile-name::after{content:" ★ ";display:inline-block;font-size:.62em;vertical-align:.35em;background:none;color:#0e86c6;-webkit-text-fill-color:#0e86c6;text-shadow:none;animation:accent-twinkle 2.2s ease-in-out infinite alternate;animation-delay:.7s}
  .profile-rows{margin-top:30px;text-align:left}
  .profile-row{
    display:flex;align-items:baseline;gap:18px;
    padding:14px 6px;
    border-top:2.5px dotted #a9cef2;
    line-height:1.4;
  }
  .profile-row:nth-child(even){border-top-color:#ffb9d6}
  .profile-row:nth-child(3){border-top-color:#a5e0fa}
  .profile-row:last-child{border-bottom:2.5px dotted #b39dff}
  .profile-label{
    flex:none;
    width:82px;
    font-size:11px;font-weight:600;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--accent-deep);
  }
  .profile-row:nth-child(even) .profile-label{color:var(--eblue-dark)}
  .profile-value{
    font-size:15px;font-weight:500;
    letter-spacing:.03em;
    color:var(--ink);
    overflow-wrap:break-word;
    min-width:0;
  }
  .link-tiles{
    margin-top:30px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    background:#fff;
    border:3px solid var(--ink);
    border-radius:30px;
    padding:14px;
    box-shadow:6px 6px 0 rgba(47,185,240,.35);
  }
  .link-tile{
    display:flex;flex-direction:column;align-items:center;gap:10px;
    min-width:0;
    padding:16px 6px 13px;
    background:#fff;
    border:3px solid #2fb9f0;
    border-radius:22px;
    box-shadow:3.5px 3.5px 0 rgba(47,185,240,.45);
    text-decoration:none;
    color:var(--ink);
    text-align:center;
    transition:border-color .15s ease,box-shadow .15s ease,transform .12s ease;
  }
  .link-tile:nth-child(2){border-color:#ff5f9e;box-shadow:3.5px 3.5px 0 rgba(255,95,158,.45)}
  .link-tile:nth-child(3){border-color:#a78bfa;box-shadow:3.5px 3.5px 0 rgba(155,123,255,.45)}
  .link-tile:hover{border-color:#2fb9f0;box-shadow:4px 4px 0 rgba(47,185,240,.32);transform:translateY(-1px)}
  .link-tile:nth-child(2):hover{border-color:#ff5f9e;box-shadow:4px 4px 0 rgba(255,95,158,.34)}
  .link-tile:nth-child(3):hover{border-color:#8b7cf0;box-shadow:4px 4px 0 rgba(155,123,255,.34)}
  .link-tile:focus-visible{outline:2px dashed var(--accent-deep);outline-offset:2px}
  .link-tile .tile-icon{
    flex:none;display:flex;align-items:center;justify-content:center;
    width:48px;height:48px;
    color:#fff;
    background:#2fb9f0;
    border:3px solid var(--ink);
    border-radius:18px;
    box-shadow:inset 0 3px 0 rgba(255,255,255,.45),3px 3px 0 rgba(51,64,107,.4);
  }
  .link-tile:nth-child(2) .tile-icon{background:#ff5f9e;box-shadow:inset 0 3px 0 rgba(255,255,255,.45),3px 3px 0 rgba(51,64,107,.4)}
  .link-tile:nth-child(3) .tile-icon{background:#8b7cf0;box-shadow:inset 0 3px 0 rgba(255,255,255,.45),3px 3px 0 rgba(51,64,107,.4)}
  .link-tile:hover .tile-icon{transform:rotate(-4deg)}
  .link-tile .tile-icon svg{width:22px;height:22px}
  .link-tile .tile-label{
    font-size:12px;font-weight:600;
    letter-spacing:.02em;
    line-height:1.25;
    white-space:nowrap;
    max-width:100%;
  }

  /* ---------- prompt ---------- */
  .art{
    display:block;width:100%;height:auto;
    border:3px solid #ff8fbf;
    border-radius:28px;
    background:#fff;
    box-shadow:7px 7px 0 rgba(255,95,158,.4);
  }
  .mill-sec .art{border-color:#2fb9f0;box-shadow:7px 7px 0 rgba(47,185,240,.4)}
  .char-name{
    margin:32px 0 4px;
    text-align:center;
    font-size:clamp(40px,8.5vw,58px);
    font-weight:800;
    letter-spacing:.16em;
    text-indent:.16em;
    line-height:1.1;
    text-transform:uppercase;
  }
  .char-name::before{content:"♥";display:inline-block;font-size:.5em;vertical-align:.55em;margin:0 .35em;text-shadow:none;animation:accent-twinkle 2s ease-in-out infinite alternate}
  .char-name::after{content:"★";display:inline-block;font-size:.5em;vertical-align:.55em;margin:0 .35em;text-shadow:none;animation:accent-twinkle 2s ease-in-out infinite alternate;animation-delay:.6s}
  .pesca-sec .char-name{color:#ef4b8d;text-shadow:4px 4px 0 #ffd9ea,7px 7px 0 rgba(47,185,240,.35)}
  .pesca-sec .char-name::before{color:#0e86c6}
  .pesca-sec .char-name::after{color:#2fb9f0}
  .mill-sec .char-name{color:#0e86c6;text-shadow:4px 4px 0 #d8f4fe,7px 7px 0 rgba(255,95,158,.35)}
  .mill-sec .char-name::before{color:#ff5f9e}
  .mill-sec .char-name::after{color:#8b7cf0}
  .prompt-sep{border:none;height:7px;border-radius:99px;background:#8b7cf0;margin:54px 0 48px;box-shadow:0 2px 10px rgba(139,124,240,.25)}
  .block{margin:20px 0 24px}
  .block-head{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    margin-bottom:9px;
    padding:0 2px;
  }
  .block-head h3{
    font-size:13px;font-weight:600;
    letter-spacing:.26em;
    text-transform:uppercase;
    color:var(--ink);
  }
  .block-head h3::before{content:"✦ ";font-size:11px}
  .block-head h3::after{content:" ♥";font-size:10px;color:#2fb9f0}
  .pesca-sec .block-head h3{color:var(--pink-dark)}
  .pesca-sec .block-head h3::before{color:var(--pink)}
  .pesca-sec .block-head h3::after{color:#0e86c6}
  .mill-sec .block-head h3{color:var(--eblue-dark)}
  .mill-sec .block-head h3::before{color:var(--eblue-dark)}
  .mill-sec .block-head h3::after{color:#ff5f9e}
  .copy-btn{
    font-family:var(--ui);
    font-size:12.5px;font-weight:800;
    letter-spacing:.08em;
    line-height:1.3;
    min-height:34px;
    padding:6px 18px;
    background:#8b7cf0;
    border:2.5px solid var(--ink);
    border-radius:999px;
    color:var(--ink);
    cursor:pointer;
    flex:none;
    white-space:nowrap;
    box-shadow:inset 0 2px 0 rgba(255,255,255,.5),3px 3px 0 rgba(51,64,107,.5);
    transition:filter .15s ease,transform .12s ease,box-shadow .15s ease;
  }
  .pesca-sec .copy-btn{background:#ff5f9e;box-shadow:inset 0 2px 0 rgba(255,255,255,.5),3px 3px 0 rgba(51,64,107,.5)}
  .pesca-sec .copy-btn:hover{filter:brightness(1.05)}
  .mill-sec .copy-btn{background:#2fb9f0;box-shadow:inset 0 2px 0 rgba(255,255,255,.5),3px 3px 0 rgba(51,64,107,.5)}
  .mill-sec .copy-btn:hover{filter:brightness(1.05)}
  .copy-btn:active{transform:translateY(1px)}
  .copy-btn.copied{background:#33406b !important;border-color:#fff !important;color:#fff !important;box-shadow:3px 3px 0 rgba(51,64,107,.35) !important}
  .copy-btn:focus-visible{outline:3px dashed var(--purple);outline-offset:2px}
  .copy-all-full{
    position:relative;
    display:block;
    width:100%;
    margin:18px 0 6px;
    padding:13px 14px;
    min-height:50px;
    font-size:15px;font-weight:800;
    letter-spacing:.14em;
    text-align:center;
    text-transform:uppercase;
    color:var(--ink) !important;
    border:3px solid var(--ink) !important;
    border-radius:999px;
  }
  .copy-all-full::before,.copy-all-full::after{content:none !important}
  .pesca-sec .copy-all-full{background:#ff5f9e;box-shadow:inset 0 4px 0 rgba(255,255,255,.45),5px 5px 0 #33406b}
  .pesca-sec .copy-all-full:hover{filter:brightness(1.03)}
  .mill-sec .copy-all-full{background:#2fb9f0;box-shadow:inset 0 4px 0 rgba(255,255,255,.45),5px 5px 0 #33406b}
  .mill-sec .copy-all-full:hover{filter:brightness(1.03)}
  .block pre{
    font-family:var(--mono);
    font-size:12px;
    line-height:1.8;
    color:#22344f;
    white-space:pre-wrap;
    overflow-wrap:break-word;
    padding:16px 18px;
    background:#fff;
    border:3px solid #a9cef2;
    border-radius:22px;
    box-shadow:5px 5px 0 rgba(139,124,240,.28);
    user-select:text;
  }
  .pesca-sec .block pre{background:#fff7fa;border-color:#ff8fbf;box-shadow:5px 5px 0 rgba(255,95,158,.38)}
  .mill-sec .block pre{background:#f2fcff;border-color:#4cc9f5;box-shadow:5px 5px 0 rgba(47,185,240,.38)}

  /* ---------- gallery (composed mosaic, natural aspect, no cropping) ---------- */
  /* The panel is a stack of horizontal bands. The hero band makes the
     portrait #4 (2:3) unmistakably the largest image: it stands tall
     on the left at the band's full height, and the right column stacks
     #1 (560:373) over #5 (1:1) at one shared width, their aspect-derived
     heights plus the gap totalling exactly #4's height. Solving
     H = #4's height, R = right column width, W = panel width, g = 16px:
       #4 height = 1.5 × its width, stack ≈ 1.6661R + g = H,
       widths #4 + R + g = W
       → #4 width ≈ 0.5262W − 3.4px, R ≈ 0.4738W − 12.6px.
     The columns below are written in cqw against the mosaic (a query
     container) so that solution holds exactly at any panel width; the
     plain 1.17fr/1fr line first is the fallback where cqw is unknown.
     Lower bands keep aspect-derived fr ratios so every image in a
     band shares one height at its natural aspect — no cropping, no
     distortion, and the squares stay smaller accents than #4. */
  .gallery-mosaic{
    display:flex;flex-direction:column;gap:16px;
    padding:6px 0 14px;
    container-type:inline-size;
  }
  .g-band{display:grid;gap:16px}
  .g-band.hero{
    grid-template-columns:1.11fr 1fr;
    grid-template-columns:calc(52.623cqw - 3.37px) calc(47.377cqw - 12.63px);
  }
  .g-stack{display:flex;flex-direction:column;gap:16px;min-width:0}
  /* landscape 560:383 beside a square 1:1 — equal heights at 1.462:1 */
  .g-band.land-sq{grid-template-columns:1.462fr 1fr}
  /* two 3:2 landscapes side by side */
  .g-band.pair{grid-template-columns:1fr 1fr}
  .g-item{
    display:block;
    position:relative;
    width:100%;
    margin:0;
    padding:0;
    background:none;
    border:none;
    cursor:pointer;
  }
  /* overlaid one-word titles: thin, quiet, no box — just lettering
     with a very soft shadow; placement and colour vary per image */
  .g-cap{
    position:absolute;
    z-index:1;
    pointer-events:none;
    font-family:"Cormorant Garamond",Georgia,serif;
    font-weight:300;
    font-style:italic;
    font-size:22px;
    letter-spacing:.06em;
    line-height:1;
    text-transform:uppercase;
    opacity:.85;
    white-space:nowrap;
  }
  .g-cap.light{color:#fff;text-shadow:0 1px 7px rgba(20,16,60,.38),0 0 2px rgba(20,16,60,.28)}
  .g-cap.dark{color:rgba(44,41,96,.88);text-shadow:0 1px 7px rgba(255,255,255,.65),0 0 2px rgba(255,255,255,.55)}
  .g-cap.br{right:11px;bottom:11px;margin-right:-.06em}
  .g-cap.bl{left:13px;bottom:11px}
  .g-cap.tl{left:13px;top:12px}
  .g-cap.tr{right:11px;top:12px;margin-right:-.06em}
  .g-cap.tc{left:50%;top:12px;transform:translateX(calc(-50% + .03em))}
  .g-item img{
    display:block;
    width:100%;
    height:auto;
    border-radius:20px;
    background:#fff;
    border:4px solid #fff;
    box-shadow:5px 5px 0 rgba(139,124,240,.35);
    outline:3px solid rgba(139,124,240,.5);
  }
  .g-band .g-item:nth-child(odd) img{outline-color:rgba(255,95,158,.55);box-shadow:5px 5px 0 rgba(255,95,158,.35)}
  .g-band .g-item:nth-child(even) img{outline-color:rgba(47,185,240,.55);box-shadow:5px 5px 0 rgba(47,185,240,.35)}
  .g-item:focus-visible{outline:2px dashed var(--accent-deep);outline-offset:2px;border-radius:5px}

  /* ---------- lightbox ---------- */
  .lightbox{
    position:fixed;inset:0;
    z-index:80;
    display:none;
    align-items:center;justify-content:center;
    background:rgba(22,22,34,.88);
    padding:18px;
  }
  .lightbox.open{display:flex}
  .lightbox img{
    max-width:min(94vw,1020px);
    max-height:88vh;
    width:auto;height:auto;
    border-radius:16px;
    background:#fff;
    box-shadow:0 10px 40px rgba(0,0,0,.35);
  }
  .lightbox-close{
    position:absolute;top:14px;right:14px;
    width:42px;height:42px;
    border-radius:50%;
    border:3px solid #8b7cf0;
    background:#fff;
    color:#7a5fe0;
    font-family:var(--ui);
    font-size:15px;font-weight:800;line-height:1;
    cursor:pointer;
    box-shadow:3px 3px 0 rgba(155,123,255,.30);
  }
  .lightbox-close:focus-visible{outline:2px dashed var(--accent-deep);outline-offset:2px}

  footer{
    text-align:center;
    margin-top:56px;
    padding:30px 0 40px;
    border-top:4px solid #2fb9f0;
    color:var(--muted);
  }
  footer .small::before{content:" ♥ ";color:#ff5f9e;font-size:10px}
  footer .small::after{content:" ★ ";color:#2fb9f0;font-size:10px}
  footer .small{font-family:var(--ui);font-weight:500;font-size:11px;letter-spacing:.08em;line-height:1.9}

  @media (max-width:560px){
    .page{padding:0 14px}
    .panel-sub{padding:19px 0 6px}
    .hero-pill{font-size:11px;padding:4px 11px;right:-6px}
    .profile-photo{width:140px;height:140px;border-radius:27px}
    .profile-name{font-size:30px;margin-top:20px}
    .profile-label{width:70px}
    .link-tile{padding:16px 3px 13px}
    .link-tile .tile-label{font-size:11px;letter-spacing:.01em}
    .char-name{font-size:38px}
    .wordmark-img{height:25px}
    .wordmark-spark{font-size:18px}
    .g-cap{font-size:18px;letter-spacing:.06em}
    .g-cap.br,.g-cap.tr{margin-right:-.06em}
    .g-cap.tc{transform:translateX(calc(-50% + .03em))}
    .block pre{font-size:11.5px;padding:14px 14px}
    footer{margin-top:44px}
  }