/* Shared cards for the home section and the Projects page. */
.app .proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;}
.app .proj-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:16px;box-shadow:var(--cardShadow);}
.app .proj-cover-wrap{position:relative;margin-bottom:16px;}
.app .proj-cover-frame{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;box-shadow:var(--cardShadow);background:linear-gradient(150deg,var(--surface3),var(--surface));}
.app .proj-cover-frame .proj-cover{position:absolute;inset:0;width:100%;height:100%;display:block;}
.app .proj-cover-frame img.proj-cover{object-fit:cover;}
.app .proj-title-row{display:flex;align-items:center;gap:8px;margin-bottom:5px;}
.app .proj-title-row h3{font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.app .proj-arrow{flex-shrink:0;color:var(--accent);display:inline-flex;opacity:0;transform:translateX(-4px);transition:opacity .25s ease,transform .25s ease;}
.app .proj-description{font-size:13px;line-height:1.45;color:var(--text2);overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;margin-bottom:12px;}
.app .proj-stack{display:flex;flex-wrap:wrap;gap:6px;}
.app .proj-card .proj-tag{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb,var(--green) 13%,transparent);padding:4px 9px;border-radius:9999px;}

/* Portrait and playground share a grid layer; content never inherits its fade. */
.app .nakamotox-feature{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:40px;align-items:start;margin:28px 0 48px;}
.app .nakamotox-intro,.app .nakamotox-playground-stage{min-width:0;}
.app .nakamotox-intro h3{line-height:1.2;letter-spacing:-.01em;font-weight:700;color:var(--text);text-wrap:balance;}
.app .nakamotox-intro h4{line-height:1.4;font-weight:600;color:var(--accent);margin:7px 0 16px;text-wrap:balance;}
.app .nakamotox-description{font-size:16px;line-height:1.55;color:var(--text2);max-width:65ch;text-wrap:pretty;}
.app .nakamotox-course{display:inline-block;margin-top:20px;padding:7px 10px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--text2);font-size:12px;line-height:1.5;}
.app .nakamotox-stack{display:flex;flex-wrap:wrap;gap:7px 12px;list-style:none;margin:17px 0 19px;padding:0;color:var(--text2);font-size:12px;line-height:1.5;}
.app .nakamotox-links{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 14px;padding:0 6px 2px;}
.app .nakamotox-links a,.app .nakamotox-case-header a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--accent);font-size:14px;font-weight:600;text-decoration:none;}
.app .nakamotox-case-header a:hover{color:var(--text);}
.app .nakamotox-feature :focus-visible,.app .nakamotox-case-page :focus-visible{outline:2px solid var(--accent);outline-offset:4px;}
/* Adapted from Uiverse.io by mobinkakei; arrow space stays fixed during hover. */
.app :is(.nakamotox-links, .project-modal-actions) .project-cta{
  --cta-fill:var(--surface2);
  --cta-ink:var(--accent);
  --cta-highlight:#fbc638;
  --cta-ease:cubic-bezier(.22,1,.36,1);
  position:relative;
  flex:0 0 auto;
  max-width:100%;
  justify-content:center;
  min-height:44px;
  padding:0 12px;
  border:0;
  border-radius:3px;
  background:transparent;
  color:var(--cta-ink);
  font-size:12px;
  font-weight:600;
  line-height:1.2;
  transform:skewX(-12deg);
  transition:transform .2s var(--cta-ease);
  touch-action:manipulation;
}
/* A 32px painted button inside a real 44px link keeps touch targets generous. */
.app :is(.nakamotox-links, .project-modal-actions) .project-cta::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:6px 0;
  border-radius:3px;
  background:var(--cta-fill);
  box-shadow:2px 2px 0 color-mix(in srgb,var(--accent) 38%,var(--bg));
  pointer-events:none;
  transition:box-shadow .25s var(--cta-ease),background-color .2s var(--cta-ease);
}
.app :is(.nakamotox-links, .project-modal-actions) .project-cta--primary{--cta-fill:var(--accent);--cta-ink:var(--btn-text);}
.app .project-cta-content{display:flex;align-items:center;gap:8px;transform:skewX(12deg);}
.app .project-cta-label{white-space:nowrap;}
.app .project-cta-arrow{display:block;flex:none;width:24px;height:16px;}
.app .project-cta-chevron{fill:currentColor;transform-box:view-box;transition:transform .4s var(--cta-ease);}
.app .project-cta-chevron--one{transform:translateX(-60%);}
.app .project-cta-chevron--two{transform:translateX(-30%);transition-duration:.3s;}
.app :is(.nakamotox-links, .project-modal-actions) .project-cta:is(:hover:not([data-input=touch] *),:focus-visible:not([data-input] *),[data-held]){transform:skewX(-12deg) translate(-1px,-1px);}
.app :is(.nakamotox-links, .project-modal-actions) .project-cta:is(:hover:not([data-input=touch] *),:focus-visible:not([data-input] *),[data-held])::before{background:var(--surface3);box-shadow:3px 3px 0 var(--cta-highlight);}
.app :is(.nakamotox-links, .project-modal-actions) .project-cta--primary:is(:hover:not([data-input=touch] *),:focus-visible:not([data-input] *),[data-held])::before{background:var(--greenHover);}
.app .project-cta:is(:hover:not([data-input=touch] *),:focus-visible:not([data-input] *),[data-held]) .project-cta-chevron{transform:translateX(0);animation:project-cta-chevron 1s ease-in-out infinite .2s;}
.app .project-cta:is(:hover:not([data-input=touch] *),:focus-visible:not([data-input] *),[data-held]) .project-cta-chevron--one{animation-delay:.6s;}
.app .project-cta:is(:hover:not([data-input=touch] *),:focus-visible:not([data-input] *),[data-held]) .project-cta-chevron--two{animation-delay:.4s;}
.app :is(.nakamotox-links, .project-modal-actions) .project-cta:active:not([data-held]){transform:skewX(-12deg) translate(1px,1px);}
.app :is(.nakamotox-links, .project-modal-actions) .project-cta:active:not([data-held])::before{box-shadow:1px 1px 0 var(--cta-highlight);}
@keyframes project-cta-chevron{0%,100%{fill:var(--cta-ink);}50%{fill:var(--cta-highlight);}}
@media(max-width:600px){.app :is(.nakamotox-links, .project-modal-actions) .project-cta{padding:0 10px;}}
/* A touch screen has no hover, so there the buttons wear the lit pose from the start - raised on the yellow shadow, chevrons out and pulsing - and a held finger presses them down as a click does; the longer path outranks the lit pose [data-held] also takes. */
@media(hover:none){.app :is(.nakamotox-links, .project-modal-actions) .project-cta{transform:skewX(-12deg) translate(-1px,-1px);}.app :is(.nakamotox-links, .project-modal-actions) .project-cta::before{background:var(--surface3);box-shadow:3px 3px 0 var(--cta-highlight);}.app :is(.nakamotox-links, .project-modal-actions) .project-cta--primary::before{background:var(--greenHover);}.app .project-cta .project-cta-chevron{transform:translateX(0);animation:project-cta-chevron 1s ease-in-out infinite .2s;}.app .project-cta .project-cta-chevron--one{animation-delay:.6s;}.app .project-cta .project-cta-chevron--two{animation-delay:.4s;}.app :is(.nakamotox-intro .nakamotox-links, .modal-card .project-modal-actions) .project-cta[data-held]{transform:skewX(-12deg) translate(1px,1px);}.app :is(.nakamotox-intro .nakamotox-links, .modal-card .project-modal-actions) .project-cta[data-held]::before{box-shadow:1px 1px 0 var(--cta-highlight);}}
.app .nakamotox-playground-stage{position:relative;isolation:isolate;padding:0;}
/* One grid material for the portrait and playground; only size/insets differ. The mask is sized to the box's closest side and is transparent by 100%, so the grid has faded out before any edge (sized to the farthest corner it was still ~15% at the edges and ended in straight cuts). */
.app .nakamotox-playground-stage::before,.app .avatar-stage::before{
  --grid-step:clamp(22px,2.5vw,28px);
  --grid-major-step:calc(var(--grid-step) * 4);
  --grid-fine:color-mix(in srgb,var(--text) 7%,transparent);
  --grid-major:color-mix(in srgb,var(--accent) 15%,transparent);
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(to right,var(--grid-major) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-major) 1px,transparent 1px),
    linear-gradient(to right,var(--grid-fine) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-fine) 1px,transparent 1px);
  background-size:var(--grid-major-step) var(--grid-major-step),var(--grid-major-step) var(--grid-major-step),var(--grid-step) var(--grid-step),var(--grid-step) var(--grid-step);
  -webkit-mask-image:radial-gradient(closest-side at 52% 50%,#000 38%,rgb(0 0 0 / .72) 72%,transparent 100%);
  mask-image:radial-gradient(closest-side at 52% 50%,#000 38%,rgb(0 0 0 / .72) 72%,transparent 100%);
}
.app.theme-light .nakamotox-playground-stage::before,.app.theme-light .avatar-stage::before{
  --grid-fine:color-mix(in srgb,var(--text) 9%,transparent);
  --grid-major:color-mix(in srgb,var(--accent) 18%,transparent);
}
.app .nakamotox-playground-stage::before{inset:-72px -46px;}
.app crypto-playground{display:block;min-width:0;}
.app .nakamotox-other-title{font-weight:700;color:var(--text2);margin:0 0 16px;}
.app .other-projects-grid{max-width:670px;grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
.app .other-projects-grid .proj-card{min-width:0;}
.app .nakamotox-case-page{position:fixed;inset:0;z-index:160;overflow-y:auto;overscroll-behavior:contain;background:var(--bg);color:var(--text);}
.app .nakamotox-case-header{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--border);}
.app .nakamotox-case-toolbar{max-width:1080px;margin:auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding:10px 24px;min-height:66px;}
.app .case-controls{display:flex;gap:4px;margin-left:auto;}
.app .case-controls button{min-width:44px;min-height:44px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text2);font-family:inherit;font-size:12px;font-weight:600;line-height:1;cursor:pointer;}
.app .case-controls button[aria-current="true"]{color:var(--accent);border-color:var(--accent);}
.app .case-controls .theme-btn{display:inline-flex;align-items:center;justify-content:center;}
.app .case-controls .theme-btn svg{width:18px;height:18px;}
.app .nakamotox-case-body{max-width:1080px;margin:auto;padding:40px 24px 90px;}
@media(max-width:1100px){.app .nakamotox-feature{grid-template-columns:1fr;gap:24px;}.app .nakamotox-intro{max-width:640px;}.app .nakamotox-stack{margin-bottom:12px;}}
@media(max-width:600px){.app .nakamotox-feature{margin-top:24px;gap:16px;}.app .nakamotox-playground-stage::before{inset:-36px -12px;}.app .other-projects-grid{gap:10px !important;}.app .other-projects-grid .proj-card h3{font-size:15px !important;}.app .nakamotox-case-toolbar{padding:8px 18px;gap:4px 12px;}.app .nakamotox-case-toolbar a{font-size:13px;}.app .nakamotox-case-body{padding:28px 18px 70px;}}

/* Compact project detail actions reuse the featured CTA, including touch motion. */
.app .modal-actions.project-modal-actions{display:flex;flex-direction:row!important;flex-wrap:wrap;align-items:center;gap:8px 14px;}
.app .project-modal-actions .project-cta{display:inline-flex;letter-spacing:0;text-transform:none;text-decoration:none;}
/* While a detail dialog is on top, only its visible arrows need to animate. */
.app:has([aria-modal="true"]) .nakamotox-links .project-cta-chevron{animation-play-state:paused;}
@media(max-width:380px){.app .modal-actions.project-modal-actions{column-gap:10px;}.app .project-modal-actions .project-cta{padding-inline:8px;}}

/* Project subheadings share one level beneath the Projects section title. */
.app :is(.nakamotox-intro h3, .nakamotox-intro h4, .nakamotox-other-title){font-size:17px;}