@font-face { font-family: "Silkscreen"; src: url("../fonts/Silkscreen-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url("../fonts/Silkscreen-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --edge: #3b2f4f; --g1: #ffb4cb; --g2: #ffc7ab; --g3: #f7c6c6; --g4: #c9b2f0; --glass: rgba(255,255,255,.6); --dots: rgba(59,47,79,.2); --hshadow: rgba(255,255,255,.55);
  --win: #fff8fb; --win2: #ffe3ee; --ink: #3b2f4f; --dim: #8a7a9e; --a: #f0649a; --b: #6b5bd2; --onbar: #3b2f4f; --hi: #2a1f3a; --line: #3b2f4f;
}
body.dream {
  --read: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --pix: "Silkscreen", "Press Start 2P", monospace;
  background: var(--g2); color: var(--ink);
}

#screen {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.2), transparent 40%),
    linear-gradient(135deg, var(--g1) 0%, var(--g2) 36%, var(--g3) 56%, var(--g4) 100%);
}
/* dotted paper texture */
#screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(var(--dots) 1px, transparent 1.4px); background-size: 9px 9px; }

/* ---------- drifting clouds ---------- */
.sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.cloud { position: absolute; left: -20%; width: 150px; height: 44px; background: rgba(255,255,255,.7); border-radius: 44px; animation: drift 90s linear infinite; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.cloud::before { width: 62px; height: 62px; left: 22px; top: -30px; }
.cloud::after { width: 46px; height: 46px; left: 74px; top: -20px; }
.c1 { top: 16%; animation-duration: 110s; }
.c2 { top: 46%; transform: scale(.8); opacity: .65; animation-duration: 140s; animation-delay: -60s; }
.c3 { top: 70%; transform: scale(1.2); opacity: .5; animation-duration: 170s; animation-delay: -110s; }
.c4 { top: 28%; transform: scale(.6); opacity: .8; animation-duration: 95s; animation-delay: -30s; }
@keyframes drift { to { left: 115%; } }

/* ---------- top bar ---------- */
.nav { position: relative; z-index: 6; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 44px; padding: 0 18px;
  background: var(--glass); backdrop-filter: blur(6px); border-bottom: 2px solid var(--edge); }
.brand { font-family: var(--pix); font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: none; letter-spacing: .02em; }
.bspark { color: var(--a); margin-right: 6px; }
#navlinks { display: flex; gap: 22px; }
#navlinks button { background: none; border: 0; font-family: var(--pix); font-size: 13px; color: var(--dim); padding: 4px 0; }
#navlinks button:hover { color: var(--a); }

#desktop { z-index: 1; }

/* ---------- hero ---------- */
.dhero { position: absolute; left: clamp(18px, 6vw, 96px); top: clamp(14px, 6vh, 56px); right: 36%; }
.deyebrow { margin: 0 0 14px; font-family: var(--pix); font-size: 12px; letter-spacing: .14em; color: var(--dim); }
.dhero h1 { margin: 0; font-family: "Press Start 2P", var(--pix); font-weight: 400; font-size: clamp(26px, min(6.2vw, 9.5vh), 78px); line-height: 1.15; color: var(--ink);
  text-shadow: 4px 4px 0 var(--hshadow); }
.dhero h1 span { color: var(--a); text-shadow: 4px 4px 0 var(--hshadow); }
.dsub { margin: 16px 0 26px; font-family: var(--pix); font-size: 12px; letter-spacing: .08em; color: var(--dim); }

/* ---------- desktop tiles ---------- */
#tiles { display: grid; grid-template-columns: repeat(3, 100px); gap: 26px 40px; }
body.still .cloud { animation-play-state: paused; }
.tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; background: none; border: 0; padding: 0; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.tile .art { width: 88px; height: 88px; display: grid; place-items: center; background: var(--c); border: 3px solid var(--edge); box-shadow: 6px 6px 0 var(--edge); transition: box-shadow .12s, translate .12s; }
.tile .art svg { width: 56px; height: 56px; filter: drop-shadow(2px 2px 0 rgba(59,47,79,.35)); }
.tile:hover .art { translate: -2px -2px; box-shadow: 8px 8px 0 var(--edge); }
.tile.drag .art { translate: -3px -3px; box-shadow: 10px 10px 0 var(--edge); cursor: grabbing; }
.tile:focus-visible .art { outline: 3px dashed var(--a); outline-offset: 4px; }
.tile span { font-family: var(--pix); font-size: 11px; color: var(--ink); text-align: center; line-height: 1.3; text-shadow: 1px 1px 0 var(--hshadow); }
.tile.sel span { background: var(--ink); color: var(--win); padding: 0 5px; text-shadow: none; }

/* ---------- sticky note ---------- */
.sticky { position: absolute; right: clamp(16px, 6vw, 90px); top: clamp(14px, 6vh, 56px); width: min(250px, 38vw); padding: 24px 22px 18px; transform: none; border: 0;
  background: #fff1a0; color: var(--edge); box-shadow: 7px 7px 0 rgba(59,47,79,.3); font-family: var(--pix); }
.sticky::before { content: ""; position: absolute; top: -14px; left: 50%; width: 90px; height: 26px; margin-left: -45px; background: rgba(255,200,215,.8); border: 0; transform: rotate(-2deg); }
.sticky::after { content: ""; position: absolute; right: 0; bottom: 0; border: 16px solid transparent; border-right-color: rgba(59,47,79,.1); border-bottom-color: rgba(59,47,79,.1); }
.sticky b { display: block; font-size: 10px; letter-spacing: .12em; color: var(--dim); margin-bottom: 14px; }
.sticky p { margin: 0 0 16px; font-size: 17px; line-height: 1.5; font-weight: 700; }
.sticky em { font-style: normal; font-size: 11px; color: var(--dim); }

/* ---------- dock + status ---------- */
.dock { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 6; display: flex; align-items: flex-end; gap: 14px; padding: 10px 16px 8px;
  background: var(--glass); backdrop-filter: blur(6px); border: 2px solid rgba(59,47,79,.35); box-shadow: 5px 5px 0 rgba(59,47,79,.25); }
.dock button { background: none; border: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: var(--pix); font-size: 8px; color: var(--ink); }
.dock .art { width: 46px; height: 46px; display: grid; place-items: center; background: var(--c); border: 2px solid var(--edge); box-shadow: 3px 3px 0 var(--edge); transition: translate .12s; }
.dock .art svg { width: 30px; height: 30px; }
.dock button:hover .art { translate: 0 -6px; }
.dock .sep { align-self: stretch; width: 2px; background: rgba(59,47,79,.3); margin: 0 2px; }
.status { position: absolute; bottom: 8px; z-index: 6; font-family: var(--pix); font-size: 9px; letter-spacing: .06em; color: var(--dim); }
.status.l { left: 16px; display: flex; align-items: center; gap: 7px; }
.status.l i { width: 9px; height: 9px; background: #4ade80; border: 2px solid var(--edge); }
.status.r { right: 16px; }

/* ---------- windows in this style ---------- */
body.dream .win { border: 3px solid var(--edge); box-shadow: 8px 8px 0 var(--edge); animation: pop-in .28s steps(5); }
@keyframes pop-in { from { transform: scale(.85); opacity: 0; } }
body.dream .win .bar { background: var(--win2); color: var(--ink); border-bottom: 3px solid var(--edge); }
body.dream .win.active .bar { background: linear-gradient(90deg, var(--a), var(--b)); color: var(--onbar); }
body.dream .ctl button { background: var(--win); color: var(--ink); border: 2px solid var(--edge); box-shadow: 2px 2px 0 var(--edge); }
body.dream .ctl button:hover { background: var(--a); color: #fff; }
body.dream .ctl .cls:hover { background: #ff5d7d; }
body.dream .win .ttl { font-family: var(--pix); color: inherit; font-weight: 700; font-size: 13px; }
body.dream .blog .list, body.dream .notes nav { background: var(--win2); }
body.dream .blog .item.on, body.dream .notes nav button.on { background: var(--a); color: #fff; }
body.dream .prose h1, body.dream .prose h2, body.dream .prose h3 { color: var(--a); }
body.dream .prose pre { background: #1e1730; color: #ffe9f3; }
body.dream .btn { background: var(--win); box-shadow: 3px 3px 0 var(--edge); border: 2px solid var(--edge); color: var(--ink); }
body.dream .btn:hover { background: var(--a); color: #fff; }
body.dream .term { background: #1e1730; }
body.dream .grip { background: linear-gradient(135deg, transparent 50%, var(--a) 50% 58%, transparent 58% 70%, var(--a) 70% 78%, transparent 78%); }

/* character: plum outline in this style */
body.dream .me { bottom: 70px; right: clamp(24px, 10vw, 150px);
  filter: drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 -3px 0 var(--ink)) drop-shadow(6px 8px 0 rgba(59,47,79,.25)); }

@media (max-width: 900px) {
  .dhero { right: 18px; }
  .sticky { display: none; }
  #tiles { grid-template-columns: repeat(3, 84px); gap: 20px 22px; }
  .tile .art { width: 76px; height: 76px; }
  .status.r { display: none; }
}
@media (max-width: 560px) { .dock { gap: 8px; padding: 8px 10px 6px; } .dock .art { width: 38px; height: 38px; } #navlinks { gap: 14px; } .brand { font-size: 12px; } }
@media (max-width: 720px) {
  body.dream .win { box-shadow: none; }
  body.dream .me { width: 110px; bottom: 96px; right: 8px; }
}

#tasks[hidden] { display: none !important; }

@media (max-height: 760px) and (min-width: 901px) {
  .dhero { top: 22px; }
  .deyebrow { margin-bottom: 8px; }
  .dsub { margin: 10px 0 18px; }
  #tiles { grid-template-columns: repeat(3, 84px); gap: 12px 30px; }
  .tile .art { width: 72px; height: 72px; }
  .tile .art svg { width: 46px; height: 46px; }
}

/* keep windows clear of the dock */
body.dream #windows { bottom: 104px; }
@media (max-width: 720px) { body.dream #windows { bottom: 0; } }

/* ---------- leave a trace: a standalone paper card in the bottom-left corner ---------- */
.tracecard { position: absolute; left: clamp(18px, 6vw, 96px); bottom: 54px; width: 232px; z-index: 3; display: flex; flex-direction: column; gap: 8px;
  padding: 22px 14px 12px; text-align: left; color: #3b2f4f; background: #fff9ef; border: 3px dashed var(--edge); box-shadow: 7px 7px 0 var(--edge);
  transform: rotate(-2.5deg); transition: transform .18s steps(4), box-shadow .18s steps(4); cursor: pointer; font-family: var(--pix); }
.tracecard:hover { transform: rotate(0deg) translate(-2px, -3px); box-shadow: 10px 10px 0 var(--edge); }
.tracecard:focus-visible { outline: 3px solid var(--a); outline-offset: 4px; }
.tracecard .tape { position: absolute; top: -13px; left: 50%; width: 84px; height: 24px; margin-left: -42px; background: rgba(255, 170, 200, .85); border: 1px solid rgba(59,47,79,.2); transform: rotate(2deg); }
.tracecard .tcl { font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.tracecard canvas { width: 100%; height: auto; aspect-ratio: 11 / 6; display: block; border: 2px solid #3b2f4f; background-color: #fffdf7;
  background-image: radial-gradient(rgba(59,47,79,.18) 1px, transparent 1.3px); background-size: 8px 8px; }
.tracecard .tcs { font-size: 9px; letter-spacing: .08em; color: #8a7a9e; text-transform: uppercase; }
.tracecard .tpen { position: absolute; right: -16px; top: -22px; width: 46px; height: 46px; transform: rotate(18deg); filter: drop-shadow(3px 3px 0 rgba(59,47,79,.4)); animation: penwig 1.8s steps(2) infinite; }
.tracecard .tpen svg { width: 100%; height: 100%; }
@keyframes penwig { 50% { transform: rotate(8deg) translate(-2px, 2px); } }
@media (max-width: 900px) { .tracecard { width: 176px; bottom: 96px; } }
@media (max-width: 720px) { .tracecard { left: 12px; bottom: 100px; } }
@media (max-height: 640px) and (min-width: 901px) { .tracecard { bottom: 44px; width: 200px; } }

/* shorter screens: slimmer card so it clears the tile grid */
@media (max-height: 800px) and (min-width: 901px) {
  .tracecard { width: 196px; bottom: 42px; padding: 18px 12px 10px; gap: 6px; }
  .tracecard canvas { aspect-ratio: 11 / 4.4; }
  .tracecard .tcl { font-size: 11px; }
  .tracecard .tcs { font-size: 8px; }
  .tracecard .tpen { width: 38px; height: 38px; right: -14px; top: -20px; }
}

/* wide screens: size the heading and tiles from the viewport height so the bottom-left corner stays free */
@media (min-width: 901px) {
  :root { --t: clamp(56px, 11.4vh, 100px); }
  .dhero { top: clamp(14px, 3.5vh, 56px); }
  .dhero h1 { font-size: clamp(24px, min(6.2vw, 6.9vh), 78px); }
  .deyebrow { margin-bottom: clamp(6px, 1.4vh, 14px); }
  .dsub { margin: clamp(8px, 1.6vh, 16px) 0 clamp(12px, 2.6vh, 26px); }
  #tiles { grid-template-columns: repeat(3, var(--t)); gap: clamp(10px, 2.2vh, 26px) clamp(24px, 4vh, 40px); }
  .tile .art { width: var(--t); height: var(--t); }
  .tile .art svg { width: calc(var(--t) * .62); height: calc(var(--t) * .62); }
}

/* ---------- intro: two doors that part down the middle ---------- */
#screen { transition: transform 1.2s cubic-bezier(.2, .8, .2, 1), filter 1.2s; }
body.introing #screen { transform: scale(1.05); filter: saturate(.7) brightness(.97); }

.intro { position: fixed; inset: 0; z-index: 9800; cursor: pointer; overflow: hidden; outline: none; }
.ihalf { position: absolute; top: 0; bottom: 0; width: calc(50% + 1px); overflow: hidden; transition: transform 1s cubic-bezier(.76, 0, .2, 1); will-change: transform; }
.ihalf.l { left: 0; }
.ihalf.r { right: 0; }
.intro.open .ihalf.l { transform: translateX(-101%); }
.intro.open .ihalf.r { transform: translateX(101%); }

.iscene { position: absolute; top: 0; width: 100vw; height: 100%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.35), transparent 55%), linear-gradient(180deg, #e3b2e8 0%, #cbaaf0 52%, #b5b2f6 100%); }
.iscene::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(59,47,79,.18) 1px, transparent 1.4px); background-size: 9px 9px; }
.ihalf.l .iscene { left: 0; }
.ihalf.r .iscene { right: 0; }

.ibrand { position: absolute; top: 22px; left: 0; right: 0; text-align: center; font-family: var(--pix); font-weight: 700; font-size: 14px; color: #3b2f4f; letter-spacing: .04em; }
.ichar { width: min(48vw, 250px); position: relative; filter: drop-shadow(3px 0 0 #3b2f4f) drop-shadow(-3px 0 0 #3b2f4f) drop-shadow(0 3px 0 #3b2f4f) drop-shadow(0 -3px 0 #3b2f4f) drop-shadow(6px 8px 0 rgba(59,47,79,.25)); }
.ichar svg { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.ichar .chibi .fig { animation: floaty 3.2s steps(4) infinite; }
.ichar .chibi .tailL { animation: sway 1.6s steps(2) infinite; }
.ichar .chibi .tailR { animation: sway 1.6s steps(2) infinite .8s; }
.ichar .chibi .legL { animation: swing 1.1s steps(2) infinite; }
.ichar .chibi .legR { animation: swing 1.1s steps(2) infinite .55s; }
.ichar .chibi .handL { animation: tap .32s steps(2) infinite; }
.ichar .chibi .handR { animation: tap .32s steps(2) infinite .16s; }
.ihint { position: absolute; left: 0; right: 0; bottom: 12vh; text-align: center; font-family: var(--pix); font-size: 13px; letter-spacing: .12em; color: #3b2f4f; text-transform: uppercase; animation: hintpulse 1.4s steps(2) infinite; }
@keyframes hintpulse { 50% { opacity: .35; } }

.iseam { position: absolute; left: 50%; top: 0; bottom: 0; width: 0; transform: translateX(-50%); background: #fff; opacity: 0; pointer-events: none; z-index: 2;
  box-shadow: 0 0 46px 20px rgba(255,255,255,.85); }
.intro.open .iseam { animation: seam 1s ease-out; }
@keyframes seam { 0% { width: 0; opacity: 1; } 35% { width: 10px; opacity: 1; } 100% { width: 160px; opacity: 0; } }
html.calm .ihalf, html.calm #screen { transition: none; }
html.calm .iseam { display: none; }
html.calm .intro.open .ihalf.l, html.calm .intro.open .ihalf.r { transform: none; }
html.calm .intro { transition: opacity .5s ease; }
html.calm .intro.open { opacity: 0; }
html.calm .ihint, html.calm .ichar .chibi * { animation: none !important; }

/* shown only if JavaScript is off or fails */
.nojs { position: fixed; left: 12px; right: 12px; bottom: 60px; z-index: 9900; margin: 0; padding: 14px 16px; font: 20px/1.3 var(--ui); color: #3b2f4f; background: #fff8fb; border: 3px solid #3b2f4f; box-shadow: 5px 5px 0 #3b2f4f; }
.nojs a { color: #6b5bd2; }

/* reduced-motion visitors still get the one-time door opening (but not the idle bobbing) */
html.calm.intro-ok .ihalf { transition: transform 1s cubic-bezier(.76, 0, .2, 1) !important; }
html.calm.intro-ok .intro.open .ihalf.l { transform: translateX(-101%) !important; }
html.calm.intro-ok .intro.open .ihalf.r { transform: translateX(101%) !important; }
html.calm.intro-ok .intro { transition: none !important; }
html.calm.intro-ok .intro.open { opacity: 1 !important; }
html.calm.intro-ok .iseam { display: block !important; }
html.calm.intro-ok .intro.open .iseam { animation: seam 1s ease-out 0s 1 !important; animation-duration: 1s !important; }
html.calm.intro-ok #screen { transition: transform 1.2s cubic-bezier(.2, .8, .2, 1), filter 1.2s !important; }