html,body{margin:0;width:100%;height:100%;overflow:hidden}:root{--ink: #f7eee6;--ink-dim: rgba(247, 238, 230, .62);--accent: #ffb37e;--accent-deep: #e0885a;--glass: rgba(17, 15, 42, .55);--glass-strong: rgba(17, 15, 42, .72);--glass-border: rgba(255, 200, 160, .16);--display: "Fraunces", Georgia, serif;--body: "Outfit", "Segoe UI", sans-serif}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;background:#14122e;color:var(--ink);font-family:var(--body)}.app{position:relative;height:100vh}.canvas-wrap{position:absolute;inset:0}.canvas-wrap canvas{touch-action:none}.masthead{position:absolute;top:28px;left:32px;z-index:10;pointer-events:none;animation:settle 1.2s .2s cubic-bezier(.2,.7,.2,1) both}.masthead h1{font-family:var(--display);font-weight:500;font-size:1.35rem;letter-spacing:.01em}.masthead p{margin-top:2px;font-size:.78rem;font-weight:300;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim)}.hint{position:absolute;bottom:30px;left:50%;transform:translate(-50%);z-index:10;pointer-events:none;padding:10px 20px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:.8rem;font-weight:300;letter-spacing:.08em;color:var(--ink-dim);white-space:nowrap;animation:settle 1.2s .5s cubic-bezier(.2,.7,.2,1) both}.hint b{color:var(--ink);font-weight:500}.card{position:absolute;top:50%;right:36px;transform:translateY(-50%);z-index:10;width:min(340px,calc(100vw - 48px));padding:26px 26px 22px;border-radius:18px;background:var(--glass-strong);border:1px solid var(--glass-border);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 24px 60px #08061873;animation:cardIn .5s cubic-bezier(.2,.7,.2,1) both}.card .eyebrow{font-size:.68rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}.card h2{margin-top:8px;font-family:var(--display);font-weight:500;font-size:1.6rem;line-height:1.15}.card .blurb{margin-top:6px;font-size:.85rem;font-weight:300;font-style:italic;color:var(--ink-dim)}.card .desc{margin-top:14px;font-size:.88rem;font-weight:300;line-height:1.55;color:#f7eee6d9}.card .tech{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}.card .tech span{padding:4px 10px;border-radius:999px;border:1px solid var(--glass-border);font-size:.68rem;letter-spacing:.06em;color:var(--ink-dim)}.card .actions{display:flex;align-items:center;gap:14px;margin-top:20px}.card .visit{padding:9px 18px;border-radius:999px;background:var(--accent);color:#2a1a10;font-family:var(--body);font-size:.8rem;font-weight:600;letter-spacing:.04em;text-decoration:none;transition:background .2s}.card .visit:hover{background:#ffc79d}.card .back{border:none;background:none;color:var(--ink-dim);font-family:var(--body);font-size:.8rem;font-weight:400;letter-spacing:.04em;cursor:pointer;text-decoration:underline;text-underline-offset:3px;transition:color .2s}.card .back:hover{color:var(--ink)}:is(.card .visit,.card .back):focus-visible{outline:2px solid var(--accent);outline-offset:3px}.island-label{pointer-events:none;user-select:none;padding:6px 14px;border-radius:999px;background:#110f2a80;border:1px solid rgba(255,200,160,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:var(--display);font-size:13px;font-weight:500;letter-spacing:.03em;color:var(--ink);white-space:nowrap;transform:translateY(-4px);transition:opacity .3s}.veil{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:#14122e;font-family:var(--display);font-size:1rem;letter-spacing:.2em;color:var(--ink-dim);animation:veilOut .8s .4s both;pointer-events:none}@keyframes veilOut{to{opacity:0;visibility:hidden}}@keyframes settle{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.hint{animation-name:settleX}@keyframes settleX{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}@keyframes cardIn{0%{opacity:0;transform:translateY(calc(-50% + 14px))}to{opacity:1;transform:translateY(-50%)}}@media(max-width:640px){.masthead{top:20px;left:20px}.card{top:auto;bottom:20px;right:50%;transform:translate(50%);animation:none}.hint{bottom:22px}}@media(prefers-reduced-motion:reduce){.masthead,.hint,.card{animation-duration:.01s;animation-delay:0s}}