/* Olivier Jiyoun Jung — v2 "pink Game Boy + Mac OS 8" site.
   Palette and sizes follow the Figma file "olivierjyjung — welcome redesign". */
:root {
  --bg: #FCE9F1;        /* window / pictochat background */
  --panel: #FEEDF7;     /* buttons, info bar, memo */
  --pink: #FFB9E7;      /* the one accent pink */
  --choc: #7B4F3A;      /* outlines, arrows */
  --choc-dk: #5E3A2A;   /* window edge + shadow */
  --gray: #ABA1AA;
  --ink: #1A0714;
  --sub: #7A4E68;
  --link: #D6479C;
  --pix: 'DotGothic16', 'MS Gothic', monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #fff; color: var(--ink); font-family: var(--pix); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
img { display: block; }

/* ─── views (desktop: one at a time) ─── */
.view { min-height: 100vh; min-height: 100dvh; display: none; align-items: center; justify-content: center; padding: 48px 24px; }
.view.on { display: flex; animation: fadeIn .25s ease-out; }
@keyframes fadeIn { from { opacity: 0; } }
body.booting #site { display: none; }
body:not(.booting) #boot { display: none; }
#boot { display: flex; }

/* ─── Game Boy ─── */
.gba { position: relative; height: min(88vh, 680px); aspect-ratio: 737 / 1360; }
.gba-img { width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.lcd {
  position: absolute; left: 13.84%; top: 6.9%; width: 74.15%; height: 28.42%;
  clip-path: polygon(0 0, 100% 0, 99.01% 100%, .49% 100%);
  container-type: inline-size; overflow: hidden;
}
.lcd-in { position: absolute; inset: 0; }
.hot { position: absolute; border-radius: 50%; background: transparent; transform: translate(-50%, -50%); }
.hot:focus-visible { outline: 2px dashed var(--link); }
.hot-a     { left: 80.7%; top: 67.8%; width: 11%; aspect-ratio: 1; }
.hot-b     { left: 65.7%; top: 70.5%; width: 11%; aspect-ratio: 1; }
.hot-dpad  { left: 26.7%; top: 69.6%; width: 20%; aspect-ratio: 1; }
.hot-start { left: 58.3%; top: 92.8%; width: 9%;  aspect-ratio: 1; }

/* boot LCD — Figma render of the IMG_7905 loading screen; only the bar fill is live */
.lcd > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.boot-fill { position: absolute; left: 30.055%; top: 52.52%; height: 2.07%; width: 3.19%; background: #F4F2F8; box-shadow: 0 0 1.4cqw rgba(255,255,255,.4); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* boot → home: zoom into the LCD, flash white */
#boot-gba { transform-origin: 50% 21%; transition: transform .6s ease-in; }
#boot.zoom #boot-gba { transform: scale(4.6); }
#flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 50; transition: opacity .45s ease-out; }
#flash.on { opacity: 1; transition-duration: .5s; transition-timing-function: ease-in; }

/* say-hi LCD — Figma render; menu rows are link hotspots */
.lcd .row { position: absolute; left: 5.72%; width: 87.45%; height: 10.69%; display: block; }
.r-email { top: 53.89%; } .r-li { top: 64.47%; } .r-cv { top: 75.04%; }
.lcd .r-back { left: 79%; top: 86.5%; width: 17%; height: 11%; }
.lcd .row:hover, .lcd .row:focus-visible { background: rgba(46,42,51,.16); outline: none; }
.lcd .r-email:hover, .lcd .r-email:focus-visible { background: rgba(255,255,255,.12); }
#say.buzz #say-gba { animation: buzz .32s linear 1; }
@keyframes buzz { 0%,100% { transform: none; } 15% { transform: translateX(9px); } 35% { transform: translateX(-8px); } 55% { transform: translateX(6px); } 75% { transform: translateX(-4px); } }
#say.dim .lcd-msg > img { filter: brightness(.8); }

/* ─── Mac OS 8 Finder window ─── */
.win { position: relative; width: min(960px, 100%); background: var(--bg); border: 2px solid var(--choc-dk); box-shadow: 4px 4px 0 rgba(94,58,42,.22); display: flex; flex-direction: column; }
.win-home { width: min(820px, 100%); }
.win-title { position: relative; height: 38px; display: flex; align-items: center; justify-content: center; }
.win-title::before { content: ''; position: absolute; left: 44px; right: 76px; top: 9px; height: 22px;
  background: repeating-linear-gradient(var(--pink) 0 1.5px, #fff 1.5px 2.5px, transparent 2.5px 4px); }
.win-title h1, .win-title h2 { position: relative; margin: 0; padding: 0 10px; background: var(--bg); font: 20px/29px var(--pix); font-weight: 400; }
.box { position: absolute; top: 8px; width: 22px; height: 22px; background: var(--panel); border: 1.5px solid var(--choc);
  box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 var(--pink); }
.box.close { left: 12px; } .box.zoom { right: 40px; } .box.collapse { right: 12px; }
.box.zoom::after { content: ''; position: absolute; left: 3.5px; top: 3.5px; width: 12px; height: 10px; border: 1.5px solid var(--choc); }
.box.collapse::after { content: ''; position: absolute; left: 3.5px; width: 12px; top: 4.5px; height: 6.5px; border-top: 1.5px solid var(--choc); border-bottom: 1.5px solid var(--choc); }
button.box:hover { background: var(--pink); }
.win-info { margin: 2px 8px 6px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--panel); border: 1.5px solid var(--pink); font-size: 19px; position: relative; }
.win-info::before { content: ''; position: absolute; left: 11px; top: 9px; width: 20px; height: 20px;
  background: linear-gradient(90deg, var(--pink) 1px, transparent 1px 6px, var(--pink) 6px 7px, transparent 7px) 0 0 / 7px 7px,
              linear-gradient(var(--pink) 1px, transparent 1px 6px, var(--pink) 6px 7px, transparent 7px) 0 0 / 7px 7px; }
.win-main { display: grid; grid-template-columns: minmax(0, 1fr) 32px; grid-template-rows: auto 32px; margin: 0 8px 8px; }
.win-body { background: #fff; border: 1.5px solid var(--pink); border-right: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.win-body::-webkit-scrollbar { display: none; }
.vs, .hs, .grow { position: relative; user-select: none; background: var(--panel); border: 1.5px solid var(--pink); }
.hs { border-top: 0; } .grow { border-top: 0; border-left: 0; }
.vs i, .hs i { position: absolute; width: 32px; height: 32px; background: var(--panel); border: 1.5px solid var(--choc); box-shadow: inset 2px 2px 0 #fff, inset -2px -2px 0 var(--pink); }
.vs .up { left: -1.5px; top: -1.5px; } .vs .down { left: -1.5px; bottom: -1.5px; }
.vs .thumb { left: .5px; top: 38.5px; width: 28px; height: 34px;
  background: repeating-linear-gradient(var(--choc) 0 1.5px, transparent 1.5px 5px) 6px 8px / 16px 17px no-repeat var(--panel); }
.hs .lt { left: -1.5px; top: -1.5px; } .hs .rt { right: -1.5px; top: -1.5px; }
.vs .up::after, .vs .down::after, .hs .lt::after, .hs .rt::after { content: ''; position: absolute; border: solid transparent; }
.vs .up::after { left: 7.5px; top: 10.5px; border-width: 0 7px 8px; border-bottom-color: var(--choc); }
.vs .down::after { left: 7.5px; top: 10.5px; border-width: 8px 7px 0; border-top-color: var(--choc); }
.hs .lt::after { left: 10.5px; top: 7.5px; border-width: 7px 8px 7px 0; border-right-color: var(--choc); }
.hs .rt::after { left: 10.5px; top: 7.5px; border-width: 7px 0 7px 8px; border-left-color: var(--choc); }
.grow::after { content: ''; position: absolute; left: 6px; top: 6px; width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M0 18L18 0M6 18L18 6M12 18L18 12' stroke='%237B4F3A' stroke-width='1.5'/%3E%3C/svg%3E"); }

/* home folders — positions from the Figma home frame */
.win-home .win-body { height: 384px; max-height: none; }
.folders { position: relative; height: 100%; }
.folder { position: absolute; width: 170px; height: 110px; text-decoration: none; font-size: 16px; line-height: 19px; text-align: center; }
.folder img { width: 76px; height: 76px; margin-left: 53px; }
.folder span { position: absolute; left: 0; right: 0; top: 70px; }
.folder:nth-child(1) { left: 25px;  top: 60px; } .folder:nth-child(2) { left: 205px; top: 60px; }
.folder:nth-child(3) { left: 395px; top: 60px; } .folder:nth-child(4) { left: 575px; top: 60px; }
.folder:nth-child(5) { left: 111px; top: 220px; } .folder:nth-child(6) { left: 301px; top: 220px; } .folder:nth-child(7) { left: 491px; top: 220px; }
.folder:hover span, .folder:focus-visible span { outline: none; }
.folder:hover span > *, .folder:focus-visible span { background: none; }
.folder:hover img, .folder:focus-visible img { filter: brightness(.88); }

/* lists */
.list { display: grid; font-size: 15px; }
.lh, .lr { display: grid; grid-template-columns: var(--cols); }
.cols-3 { --cols: 57% 27.6% 15.4%; }
.cols-2 { --cols: 28.5% 71.5%; }
.cols-works { --cols: 65.8% 14% 8.1% 12.1%; }
.cols-gb { --cols: 23% 60% 17%; }
.lh { position: sticky; top: 0; z-index: 1; }
.lh span { height: 28px; padding: 3px 12px 0; background: var(--panel); border: 1.5px solid var(--pink); border-left-width: 0; font-size: 16px; line-height: 22px; }
.lh span:first-child { position: relative; border-left-width: 0; padding-left: 14px; }
.cols-works .lh span:first-child, .cols-gb .lh span:first-child { padding-left: 34px; }
.lh span:first-child::after { content: ''; position: absolute; right: 8px; top: 10px; border: solid transparent; border-width: 6px 5px 0; border-top-color: var(--choc); }
.lr { border-bottom: 1px solid var(--pink); }
.lr > div { padding: 4px 12px 8px; font-size: 14px; line-height: 20px; }
.lr > div:first-child { padding-left: 14px; }
.lr > div:nth-child(2) { background: var(--panel); }
.lr b { display: block; font-weight: 400; font-size: 18px; line-height: 24px; }
.lr small { display: block; margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--sub); }
.cols-works .lr b, .cols-gb .lr b { font-size: 15px; line-height: 20px; }
.cols-works .lr > div, .cols-gb .lr > div { font-size: 15px; }
.lr .big { font-size: 16px; line-height: 24px; }
.lr .na { color: var(--gray); }
.lr .br::before { content: '\A'; white-space: pre; }
.lr a { color: var(--link); }
.doc > div:first-child, .gb-row > div:first-child { position: relative; padding-left: 34px; }
.doc > div:first-child::before { content: ''; position: absolute; left: 10px; top: calc(50% - 2px); width: 14px; height: 17px; transform: translateY(-50%);
  background: #fff; border: 1.2px solid var(--choc); clip-path: polygon(0 0, 70% 0, 100% 24%, 100% 100%, 0 100%); }
.doc.on > div:first-child::before { background: var(--pink); }
.gb-row > div:first-child::before { content: ''; position: absolute; left: 11px; top: 13px; width: 16px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h2v1H1zM4 0h2v1H4zM0 1h1v2H0zM3 1h1v1H3zM6 1h1v2H6zM1 3h1v1H1zM5 3h1v1H5zM2 4h1v1H2zM4 4h1v1H4zM3 5h1v1H3z' fill='%237B4F3A'/%3E%3Cpath d='M1 1h2v2H1zM4 1h2v2H4zM3 2h1v1H3zM2 3h3v1H2zM3 4h1v1H3z' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat; image-rendering: pixelated; }
.gb-row.new { background: rgba(255,185,231,.35); }
.gb-row.new > div:first-child::before { filter: hue-rotate(0deg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h2v1H1zM4 0h2v1H4zM0 1h1v2H0zM3 1h1v1H3zM6 1h1v2H6zM1 3h1v1H1zM5 3h1v1H5zM2 4h1v1H2zM4 4h1v1H4zM3 5h1v1H3z' fill='%237B4F3A'/%3E%3Cpath d='M1 1h2v2H1zM4 1h2v2H4zM3 2h1v1H3zM2 3h3v1H2zM3 4h1v1H3z' fill='%23FFB9E7'/%3E%3C/svg%3E"); }
.gb-row .stars-mini { color: var(--choc); margin-left: 8px; }

/* ─── Home alert — Figma render with live buttons ─── */
#home { position: relative; }
.alert { position: absolute; left: calc(50% + 146px); top: calc(50% + 166px); width: 248px; box-shadow: 3px 3px 0 rgba(94,58,42,.22); z-index: 2; }
.alert img { width: 100%; }
.alert.gone { display: none; }
.a-close, .a-ok { position: absolute; }
.a-close { left: 2.4%; top: 3.4%; width: 4.8%; height: 10.2%; }
.a-ok { left: 68.5%; top: 67.8%; width: 26.6%; height: 23.7%; border-radius: 9px; }
.a-ok:hover { background: rgba(255,185,231,.35); }

/* ─── PictoChat (about + guestbook) ─── */
.picto-view { background: var(--bg); }
.picto-view { padding-left: 12px; padding-right: 12px; }
.picto { width: min(1000px, 100%); display: flex; flex-direction: column; align-items: center; }
.picto-head { align-self: stretch; display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 22px; }
.xbox { width: 30px; height: 30px; border: 2.5px solid var(--ink); background: #fff; font-size: 18px; line-height: 1; }
.xbox:hover { background: var(--pink); }
.picto-main { align-self: stretch; position: relative; display: flex; padding-left: 68px; }
.tools { position: absolute; left: 0; top: 0; width: 51px; height: 100%; object-fit: contain; image-rendering: pixelated; }
.memo { flex: 1; position: relative; background: var(--panel); border: 4px solid var(--ink); border-radius: 16px; padding: 10px; }
.memo::before { content: ''; position: absolute; inset: 4px; border: 3px solid var(--pink); border-radius: 12px; pointer-events: none; }
.memo-row { position: relative; display: flex; align-items: center; min-height: var(--row); border-bottom: 2.5px solid var(--pink); }
.memo-row:last-child { border-bottom: 0; }
.tag { align-self: stretch; display: flex; align-items: center; padding: 0 18px; background: var(--pink); border-right: 2.5px solid var(--pink); min-width: 196px; font-size: 24px; }
.tag.plain { background: none; min-width: 0; font-size: 26px; }
.memo-about { --row: 36px; }
.memo-about .tag { min-width: 0; }
.memo-top .deco { padding-left: 30px; font-size: 22px; white-space: nowrap; }
.memo-text { font-size: 21px; line-height: 36px; padding: 0 20px;
  background: repeating-linear-gradient(transparent 0 33.5px, var(--pink) 33.5px 36px); }
.memo-text p { margin: 0 0 36px; }
.memo-text p:last-child { margin-bottom: 0; }
.keyboard { width: min(559px, 76%); margin-top: 16px; image-rendering: auto; }

.stars { display: flex; align-items: center; gap: 6px; }
.stars button { width: 20px; height: 17px; background: url('./assets/v2/heart-empty.png') center / contain no-repeat; image-rendering: pixelated; }
.stars button.on { background-image: url('./assets/v2/heart-full.png'); }
.kb-wrap { position: relative; width: min(840px, 84%); margin-top: 16px; }
.kb-wrap .keyboard { width: 100%; margin: 0; }
.kb-wrap .hot { border-radius: 4px; transform: none; }
.hot-enter { left: 66.1%; top: 39.3%; width: 12.3%; height: 16.1%; }
.hot-send  { left: 87%;   top: .4%;   width: 13%;   height: 32.4%; }

/* ═══ Mobile: one long scrolling page ═══ */
@media (max-width: 720px) {
  .view { padding: 16px; }
  .stage { width: 100%; display: flex; flex-direction: column; align-items: stretch; }
  .stage-home .win-home, .stage-home .alert { position: relative; left: auto; top: auto; }
  .picto-view .stage { align-items: center; }
  .gba { height: auto; width: min(92vw, 380px); }
  #boot { min-height: 100dvh; }
  #say { padding: 28px 16px 60px; }

  .win-title { height: 30px; }
  .win-title::before { left: 34px; right: 60px; top: 7px; height: 16px; }
  .win-title h1, .win-title h2 { font-size: 16px; padding: 0 8px; }
  .box { top: 6px; width: 18px; height: 18px; }
  .box.close { left: 8px; } .box.zoom { right: 32px; } .box.collapse { right: 8px; }
  .box.zoom::after { width: 8px; height: 7px; }
  .win-info { height: 34px; font-size: 14px; margin: 2px 6px 6px; }
  .win-info::before { display: none; }
  .win-title h1, .win-title h2 { line-height: 22px; }
  .win-main { margin: 0 6px 6px; grid-template-columns: minmax(0, 1fr) 20px; grid-template-rows: auto 20px; }
  .win-body { max-height: calc(100dvh - 150px); overflow-y: auto; }
  .win-home .win-body { height: auto; max-height: none; overflow: visible; }
  .vs i, .hs i { width: 20px; height: 20px; }
  .vs .thumb { width: 16px; height: 24px; top: 24px; background-position: 3px 6px; background-size: 10px 12px; }
  .vs .up::after, .vs .down::after { left: 4px; top: 6px; border-width: 0 5px 6px; }
  .vs .down::after { border-width: 6px 5px 0; }
  .hs .lt::after, .hs .rt::after { left: 6px; top: 4px; border-width: 5px 6px 5px 0; }
  .hs .rt::after { border-width: 5px 0 5px 6px; }
  .grow::after { left: 3px; top: 3px; width: 12px; height: 12px; }

  .folders { display: grid; grid-template-columns: 1fr 1fr; row-gap: 26px; padding: 22px 8px 26px; height: auto; }
  .folder:nth-child(n) { position: static; width: auto; height: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 14px; line-height: 17px; }
  .folder img { width: 64px; height: 64px; margin: 0; transform: translateX(5px); }
  .folder span { position: static; }
  .alert { position: relative; left: auto; top: auto; margin: -14px 0 0 auto; width: 232px; }
  #home { flex-direction: column; align-items: stretch; }

  .lh { display: none; }
  .lr { display: block; padding: 10px 10px 10px 12px; }
  .lr > div { padding: 0; background: none !important; display: inline; font-size: 11px; line-height: 16px; color: var(--choc); }
  .lr > div:first-child { display: block; padding-left: 0; color: var(--ink); margin-bottom: 4px; }
  .lr > div:not(:first-child):not(:last-child)::after { content: ' · '; }
  .lr > div.na { display: none; }
  .lr b, .cols-works .lr b, .cols-gb .lr b { font-size: 14px; line-height: 19px; }
  .lr small { font-size: 11px; line-height: 15px; margin-top: 3px; }
  .lr .br::before { content: ' · '; white-space: normal; }
  .lr .br.dash::before { content: ' '; }
  .lr .big { font-size: 12px; line-height: 17px; }
  .doc > div:first-child, .gb-row > div:first-child { padding-left: 20px; }
  .doc > div:first-child::before { left: 0; top: 3px; transform: none; width: 11px; height: 14px; }
  .gb-row > div:first-child::before { left: 0; top: 3px; width: 13px; height: 11px; }
  .cols-2 .lr > div:last-child { color: var(--sub); }

  .picto-view { background: var(--bg); padding-top: 28px; padding-bottom: 28px; }
  .picto-head { font-size: 14px; padding-left: 0; }
  .xbox { width: 24px; height: 24px; font-size: 14px; border-width: 2px; }
  .picto-main { padding-left: 36px; }
  .tools { width: 30px; }
  .memo { border-width: 3px; border-radius: 12px; padding: 7px; }
  .memo::before { inset: 3px; border-width: 2px; border-radius: 9px; }
  .memo-about { --row: 26px; }
  .memo-row { border-bottom-width: 2px; }
  .tag { font-size: 13px; padding: 0 10px; min-width: 86px; }
  .memo-top .deco { font-size: 12px; padding-left: 12px; }
  .memo-text { font-size: 12px; line-height: 26px; padding: 0 8px; background: repeating-linear-gradient(transparent 0 24px, var(--pink) 24px 26px); }
  .memo-text p { margin-bottom: 26px; }
  .keyboard, .kb-wrap { width: 100%; }
  .stars { gap: 4px; }
  .stars button { width: 15px; height: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  #boot-gba, #flash { transition: none; }
  #say.buzz #say-gba { animation: none; }
  .view.on { animation: none; }
}


/* ═══ Desktop stage: each screen is a Figma frame, scaled down to fit the window ═══ */
@media (min-width: 721px) {
  #site .view { padding: 16px; }
  .stage { width: 1024px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 0; }
  .stage-home { position: relative; height: 768px; padding: 0; display: block; }
  .stage-home .win-home { position: absolute; left: 102px; top: 127px; width: 820px; }
  .stage-home .alert { left: 658px; top: 550px; }
  .picto-view .stage { background: var(--bg); }
  .finder-view .win-body { max-height: 560px; }
  .picto { width: 1000px; }
}

/* live Finder scrollbars */
.vs i, .hs i { cursor: inherit; }
.vs .up, .vs .down, .hs .lt, .hs .rt, .vs .thumb { pointer-events: auto; }
.vs .up:active, .vs .down:active, .hs .lt:active, .hs .rt:active { box-shadow: inset -2px -2px 0 #fff, inset 2px 2px 0 var(--pink); background-color: var(--pink); }
.vs .thumb { touch-action: none; }

/* zoom box: inner square dead centre */
.box.zoom::after { left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* mocha cursors ("mocha mouse cursor" by @a cup of di) */
html, body { cursor: url('./assets/v2/cursor-mocha.png') 1 1, auto; }
a, button, [data-go], [data-home], .folder, .row, .hot, .vs i, .hs i, input { cursor: url('./assets/v2/cursor-mocha-hand.png') 4 1, pointer; }
input { cursor: text; }

/* ─── centre every glyph inside its box ─── */
.vs .up::after, .vs .down::after, .hs .lt::after, .hs .rt::after { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }
.vs .thumb { background-position: center !important; background-size: 16px 16.5px !important; }
.box.collapse::after { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.grow::after { left: 50%; top: 50%; transform: translate(-50%, -50%); }
@media (max-width: 720px) { .vs .thumb { background-size: 10px 11.5px !important; } }


/* ─── tool column: a real ▲▼ scroller ─── */
.tools-wrap { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 51px; }
.tools-wrap .tools { position: static; width: 100%; height: auto; }
.tools-wrap button { position: absolute; left: 0; width: 100%; height: 6.5%; }
.t-up { top: 0; } .t-down { top: 12%; }
.tools-wrap button:active { background: rgba(255,185,231,.45); }
@media (min-width: 721px) {
  .memo-about .memo-text { max-height: 432px; overflow-y: auto; scrollbar-width: none; background-attachment: local; overscroll-behavior: contain; }
  .memo-about .memo-text::-webkit-scrollbar { display: none; }
  .finder-view .win-body { max-height: 400px; }
}
@media (max-width: 720px) { .tools-wrap { width: 30px; } }

/* guestbook: heart sits right next to the nickname */
.gb-row > div:first-child { padding-left: 14px !important; }
.gb-row > div:first-child::before { content: none !important; }
.gb-row b::before { content: ''; display: inline-block; width: 14px; height: 12px; margin-right: 6px; vertical-align: -1px; image-rendering: pixelated;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h2v1H1zM4 0h2v1H4zM0 1h1v2H0zM3 1h1v1H3zM6 1h1v2H6zM1 3h1v1H1zM5 3h1v1H5zM2 4h1v1H2zM4 4h1v1H4zM3 5h1v1H3z' fill='%237B4F3A'/%3E%3Cpath d='M1 1h2v2H1zM4 1h2v2H4zM3 2h1v1H3zM2 3h3v1H2zM3 4h1v1H3z' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat; }
.gb-row.new b::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h2v1H1zM4 0h2v1H4zM0 1h1v2H0zM3 1h1v1H3zM6 1h1v2H6zM1 3h1v1H1zM5 3h1v1H5zM2 4h1v1H2zM4 4h1v1H4zM3 5h1v1H3z' fill='%237B4F3A'/%3E%3Cpath d='M1 1h2v2H1zM4 1h2v2H4zM3 2h1v1H3zM2 3h3v1H2zM3 4h1v1H3z' fill='%23FFB9E7'/%3E%3C/svg%3E"); }
.cols-gb .lh span:first-child { padding-left: 14px; }


/* keyboard ENTER key moved when CAPS was widened */
.hot-enter { left: 69.25%; top: 38.67%; width: 12.69%; height: 17.13%; }
.hot-send  { left: 87.1%; top: 0; width: 12.9%; height: 32.6%; }

/* ─── one X button everywhere (IMG_7949, recoloured) ─── */
.box.close, .xbox, .a-close { background: url('./assets/v2/x-box.png') center / 100% 100% no-repeat; border: 0; box-shadow: none; image-rendering: pixelated; }
.box.close { width: 22px; height: 24px; top: 7px; }
button.box.close:hover, .xbox:hover, .a-close:hover { filter: brightness(.95) saturate(1.3); background-color: transparent; }
.xbox { width: 28px; height: 30px; font-size: 0; }
.a-close { left: 2%; top: 2.5%; width: 5.6%; height: 12.7%; background-color: var(--panel); }
@media (max-width: 720px) { .box.close { width: 18px; height: 20px; top: 5px; } .xbox { width: 22px; height: 24px; } }


/* ─── every window button shares the X button's pixel bevel ─── */
.box.zoom, .box.collapse { width: 22px; height: 24px; top: 7px; border: 0; box-shadow: none; image-rendering: pixelated; background: center / 100% 100% no-repeat; }
.box.zoom { background-image: url('./assets/v2/btn-zoom.png'); }
.box.collapse { background-image: url('./assets/v2/btn-collapse.png'); }
.box.zoom::after, .box.collapse::after { content: none; }
.vs i, .hs i { border: 0 !important; box-shadow: none !important; image-rendering: pixelated; background: center / 100% 100% no-repeat !important; }
.vs i::after, .hs i::after { content: none !important; }
.vs .up { background-image: url('./assets/v2/btn-up.png') !important; }
.vs .down { background-image: url('./assets/v2/btn-down.png') !important; }
.hs .lt { background-image: url('./assets/v2/btn-left.png') !important; }
.hs .rt { background-image: url('./assets/v2/btn-right.png') !important; }
.vs .thumb { background-image: url('./assets/v2/btn-thumb.png') !important; width: 28px; height: 34px; left: 0; }
.vs .up:active, .vs .down:active, .hs .lt:active, .hs .rt:active, .vs .thumb:active { filter: brightness(.93); }
@media (max-width: 720px) {
  .box.zoom, .box.collapse { width: 18px; height: 20px; top: 5px; }
  .vs .thumb { width: 18px; height: 22px; left: 0; }
}

/* home dialog: smaller window, content left-aligned (Figma popup v3) */
.alert { width: 206px; }

.a-close { left: 2%; top: 2.6%; width: 7.2%; height: 15.5%; }
.a-ok { left: 62.1%; top: 63.5%; width: 32%; height: 26.9%; }
/* boot LCD: only the bar + "loading", centred */
.boot-fill { top: 41.14%; }

.vs .thumb { background-size: 100% 100% !important; background-position: center !important; }
/* loading label above the bar */
.boot-fill { top: 59.77%; }


/* ═══ Mobile v2: same click-through as desktop, one window per screen ═══ */
@media (max-width: 720px) {
  #site .view { min-height: 100dvh; padding: 14px 12px; align-items: center; }
  .stage { width: 100%; }
  /* home: dialog sits in the empty cell beside guestbook.7 */
  .stage-home { position: relative; }
  .stage-home .alert { position: absolute; left: auto; top: auto; right: 20px; bottom: 42px; width: 168px; margin: 0; z-index: 3; }
  /* works & guestbook: denser type */
  .cols-works .lr b, .cols-gb .lr b { font-size: 12px; line-height: 16px; }
  .cols-works .lr > div, .cols-gb .lr > div { font-size: 10px; line-height: 14px; }
  .cols-works .lr, .cols-gb .lr { padding: 7px 8px 7px 10px; }
  .doc > div:first-child { padding-left: 18px !important; }
  .doc > div:first-child::before { width: 10px; height: 13px; }
  .lr b { font-size: 13px; line-height: 17px; }
  .lr small { font-size: 10px; line-height: 14px; }
  .lr > div { font-size: 10px; line-height: 14px; }
  /* about: memo scrolls inside, keyboard stays */
  .memo-about .memo-text { max-height: calc(100dvh - 330px); overflow-y: auto; scrollbar-width: none; background-attachment: local; overscroll-behavior: contain; }
  .memo-about .memo-text::-webkit-scrollbar { display: none; }
  .picto-view .stage { justify-content: center; }
  #say { padding: 14px 12px; }
}

/* role / degree / award titles a size down */
@media (min-width: 721px) { .cols-3 .lr b, .cols-2 .lr b { font-size: 16px; line-height: 21px; } }

/* ─── mobile polish ─── */
@media (max-width: 720px) {
  /* works: status · date · link line centred */
  .cols-works .lr { text-align: center; }
  .cols-works .lr > div:first-child { text-align: left; }
  /* guestbook rate: a clear size down so everything fits */
  #guestbook .picto-head, #about .picto-head { font-size: 12px; gap: 6px; margin-bottom: 6px; }
  #guestbook .xbox, #about .xbox { width: 17px; height: 18px; }
}

/* dialog OK: smaller, drawn in CSS, blinking */
.a-ok { left: auto; top: auto; right: 12px; bottom: 10px; width: 46px; height: 21px; padding: 0; border: 2.5px solid var(--choc-dk); border-radius: 7px;
  background: var(--panel); box-shadow: inset 0 0 0 1.5px var(--panel), inset 0 0 0 2.5px var(--choc); font: 11px/1 var(--pix); color: var(--ink);
  animation: okBlink 1.1s steps(1, end) infinite; }
.a-ok:hover { background: var(--pink); animation: none; }
@keyframes okBlink { 50% { background: var(--pink); } }
@media (prefers-reduced-motion: reduce) { .a-ok { animation: none; } }
@media (max-width: 720px) { .a-ok { right: 9px; bottom: 7px; width: 38px; height: 17px; font-size: 9px; border-width: 2px; } }
/* loading label +10pt; dialog placement */
.boot-fill { top: 62.75%; }

@media (max-width: 720px) { .stage-home .alert { bottom: 72px; } }

/* ─── round 12 ─── */
/* dialog: message + OK both centred and smaller */
.a-ok { left: 50%; right: auto; bottom: 9px; transform: translateX(-50%); width: 40px; height: 18px; font-size: 10px; border-width: 2px; border-radius: 6px; }
@media (max-width: 720px) { .a-ok { left: 50%; right: auto; bottom: 6px; width: 32px; height: 15px; font-size: 8px; } }
/* stars: IMG_7952 in pink */
.stars button { image-rendering: pixelated; }
/* desktop About: the whole memo at a glance, no inner scroll */
@media (min-width: 721px) {
  .memo-about { --row: 30px; }
  .memo-about .memo-text { max-height: none; overflow: visible; font-size: 17px; line-height: 30px; background: repeating-linear-gradient(transparent 0 28px, var(--pink) 28px 30px); }
  .memo-about .memo-text p { margin-bottom: 30px; }
  .memo-about .tag { font-size: 20px; }
  .memo-top .deco { font-size: 18px; }
  #about .picto, #guestbook .picto { width: 860px; }
  #about .keyboard, #guestbook .kb-wrap { width: 460px; }
}

/* ─── round 13: narrower dialog, OK scales with it ─── */
.alert { width: 176px; container-type: inline-size; }

.a-close { left: 2.8%; top: 2.9%; width: 8%; height: 14%; }
.a-ok, .a-ok:hover { left: 50%; right: auto; top: auto; bottom: 8.7%; transform: translateX(-50%); width: 22.7%; height: 17.3%;
  font-size: 5.7cqw; border-width: 1.2cqw; border-radius: 3.4cqw; box-shadow: inset 0 0 0 .85cqw var(--panel), inset 0 0 0 1.4cqw var(--choc); }
@media (max-width: 720px) {
  .stage-home .alert { width: 150px; }
  .a-ok, .a-ok:hover { left: 50%; right: auto; bottom: 8.7%; width: 22.7%; height: 17.3%; font-size: 5.7cqw; border-width: 1.2cqw; }
}


/* ─── round 14 ─── */
/* desktop dialog tucked just under guestbook.7 */
@media (min-width: 721px) { .stage-home .alert { left: 665px; top: 532px; } }
/* smaller PictoChat close buttons */
.xbox, #guestbook .xbox, #about .xbox { width: 20px; height: 22px; }
@media (max-width: 720px) { .xbox, #guestbook .xbox, #about .xbox { width: 14px; height: 15px; } }
/* PictoChat close = same size as the Finder close box; no tool bar on phones */
.xbox, #guestbook .xbox, #about .xbox { width: 22px; height: 24px; }
@media (max-width: 720px) {
  .xbox, #guestbook .xbox, #about .xbox { width: 18px; height: 20px; }
  .tools-wrap { display: none; }
  .picto-main { padding-left: 0 !important; }
}

/* ─── guestbook = About me memo: tag, ruled lines, one field per line ─── */
.gb-line { display: flex; align-items: flex-start; height: 36px; }
.gb-lab { flex: none; width: 7em; color: var(--sub); }
.gb-line .stars { height: calc(100% - 2.5px); }
.gb-line input { flex: 1; min-width: 0; height: calc(100% - 2.5px); padding: 0 6px; border: 0; background: transparent; outline: none;
  font: inherit; color: var(--ink); }
.gb-line input::placeholder { color: var(--gray); }
.gb-line input:focus { background: rgba(255,255,255,.55); }
.memo-gb .memo-text { min-height: calc(8 * 36px); }
@media (min-width: 721px) {
  .gb-line { height: 30px; }
  .gb-line .stars, .gb-line input { height: 28px; }
  .memo-gb .memo-text { min-height: calc(10 * 30px); }
}
@media (max-width: 720px) {
  .gb-line { height: 26px; }
  .gb-line .stars, .gb-line input { height: 24px; }
  .gb-lab { width: 6.5em; }
  .memo-gb .memo-text { min-height: calc(6 * 26px); }
}

/* PictoChat close box on the left, over the memo's corner (like the Finder windows) */
.picto-head { justify-content: flex-start; padding-left: 68px; }
@media (max-width: 720px) { .picto-head, #guestbook .picto-head, #about .picto-head { padding-left: 0; } }

/* desktop: one toolbar size, flush against the memo; close box level with the memo's top, toolbar right under it */
@media (min-width: 721px) {
  .picto { position: relative; }
  .tools-wrap { width: 27px; left: auto; right: calc(100% - 64px); top: 30px; transform: none; }
  .picto-head { position: absolute; left: 37px; top: 0; width: 27px; margin: 0; padding: 0; justify-content: center; z-index: 1; }
}
/* phone guestbook: name and message side by side, no heart */
@media (max-width: 720px) {
  .cols-gb .lr { display: grid; grid-template-columns: 30% minmax(0, 1fr) auto; column-gap: 10px; align-items: baseline; }
  .cols-gb .lr > div, .cols-gb .lr > div:first-child { display: block; margin: 0; padding-left: 0 !important; }
  .cols-gb .lr > div::after { content: none !important; }
  .cols-gb .lr > div:last-child { color: var(--gray); }
  .gb-row b::before { content: none; }
  .cols-gb .lr b { overflow-wrap: anywhere; }
}