/* ctrl·alt·create — brand v1.0 (ported from Claude Design: Website - CtrlAltCreate) */
html{scroll-behavior:smooth}
body{margin:0;background:#0a0f0b;color:#c8d6cd;font-family:'JetBrains Mono',monospace}

/* layout helpers */
.fx{display:flex}.ac{align-items:center}.jb{justify-content:space-between}
.gap8{gap:8px}.gap16{gap:16px}.f1{flex:1}.noshrink{flex:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}

/* palette */
.grn{color:#3ddc84}.moss{color:#4a5f51}.dim{color:#5f7a68}

/* chord mark */
.cgrid{display:grid}.cd{background:#1c2a21}.cg{background:#3ddc84}
.g9{grid-template-columns:repeat(3,9px);grid-auto-rows:9px;gap:3px}.g9 .cd,.g9 .cg{border-radius:2.5px}
.g11{grid-template-columns:repeat(3,11px);grid-auto-rows:11px;gap:4px}.g11 .cd,.g11 .cg{border-radius:3px}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(10,15,11,.86);backdrop-filter:blur(12px);border-bottom:1px solid #14231a}
.navin{display:flex;align-items:center;justify-content:space-between;height:72px}
.nlink{font:500 12.5px 'JetBrains Mono';color:#8fa596;text-decoration:none;padding:8px 14px;border-radius:8px;transition:color .2s,background .2s}.nlink:hover{color:#e6efe9;background:#111a13}
.kbtn{display:inline-block;font:600 13px 'JetBrains Mono';color:#0a0f0b;background:#3ddc84;padding:13px 22px;border-radius:12px;box-shadow:0 5px 0 #1a7a4a;text-decoration:none;transition:transform .12s,box-shadow .12s}.kbtn:hover{transform:translateY(2px);box-shadow:0 3px 0 #1a7a4a}.kbtn:active{transform:translateY(5px);box-shadow:0 0 0 #1a7a4a}
.gbtn{display:inline-block;font:500 13px 'JetBrains Mono';color:#8fa596;padding:13px 22px;border-radius:12px;border:1px solid #22362a;text-decoration:none;transition:color .2s,border-color .2s}.gbtn:hover{color:#e6efe9;border-color:#3ddc84}

/* hero — full viewport, key-field canvas behind */
.hero{position:relative;overflow:hidden;min-height:calc(100svh - 72px);display:flex;align-items:center;padding:60px 0}
#field{position:absolute;inset:0;z-index:0;display:block}
.hlabel{font:500 10.5px 'JetBrains Mono';letter-spacing:.3em;color:#4a5f51;margin:0 0 26px}
.h1{font:600 64px/1.08 'JetBrains Mono';letter-spacing:-.02em;color:#e6efe9;margin:0;min-height:76px}
.h1 b{font-weight:600;color:#3ddc84}
.tcur{display:inline-block;width:.55em;height:.95em;background:#3ddc84;vertical-align:-.08em;margin-left:6px;animation:blink 1.1s steps(1) infinite}@keyframes blink{50%{opacity:0}}
.hsub{font:400 15px/1.8 'JetBrains Mono';color:#7d9486;max-width:520px;margin:30px 0 40px}.hsub b{color:#c8d6cd;font-weight:500}
.hgrid{grid-template-columns:repeat(3,74px);grid-auto-rows:74px;gap:26px}
.hk{border-radius:18px;background:#10180f;border:1px solid #1c2c21;transition:transform .15s,border-color .2s;cursor:pointer}
.hk:hover{transform:translateY(5px);border-color:#2c5c40}
@keyframes lite{0%{background:#10180f}55%{transform:translateY(9px)}100%{background:#3ddc84;border-color:#3ddc84}}
/* chord order: ctrl (r3c1) → alt (r3c2) → create (r1c3) — fires when typing hands off */
.play .lit-b{animation:lite .55s .08s both}.play .lit-c{animation:lite .55s .36s both}.play .lit-a{animation:lite .55s .64s both}
.hcap{font:400 10px 'JetBrains Mono';color:#3d5747;letter-spacing:.14em;margin-top:20px;text-align:center}

/* ticker */
.tickwrap{background:#3ddc84;overflow:hidden;padding:14px 0}
.tick{display:flex;gap:0;white-space:nowrap;animation:mq 26s linear infinite;width:max-content}
.tick span{font:600 13px 'JetBrains Mono';color:#0a0f0b;letter-spacing:.06em;padding-right:56px}
@keyframes mq{to{transform:translateX(-50%)}}

/* sections */
.sec{padding:104px 0}.shd{display:flex;align-items:center;gap:16px;margin-bottom:54px}.shn{font:500 10.5px 'JetBrains Mono';letter-spacing:.3em;color:#3ddc84}.shr{flex:1;height:1px;background:#14231a}
.h2{font:600 34px/1.25 'JetBrains Mono';letter-spacing:-.01em;color:#e6efe9;margin:0}

/* contact */
.prompt{display:flex;align-items:center;gap:18px;border:1px solid #22362a;border-radius:16px;padding:26px 30px;background:#0c130e;width:max-content;max-width:100%}
.prompt a{font:600 22px 'JetBrains Mono';color:#3ddc84;text-decoration:none;min-height:29px;display:inline-block}.prompt a:hover{text-decoration:underline}
.pdol{font:600 22px 'JetBrains Mono';color:#3d5747}

/* footer */
.ftr{border-top:1px solid #14231a;padding:44px 0}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}

/* polish (production additions) */
::selection{background:#3ddc84;color:#0a0f0b}
:focus-visible{outline:2px solid #3ddc84;outline-offset:3px;border-radius:8px}
.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,80px);z-index:99;background:#0c130e;border:1px solid #2c5c40;border-radius:12px;padding:14px 22px;font:500 12.5px 'JetBrains Mono';color:#3ddc84;box-shadow:0 12px 40px rgba(0,0,0,.5);opacity:0;transition:transform .45s cubic-bezier(.2,.9,.3,1.2),opacity .3s;pointer-events:none;white-space:nowrap}
.toast.show{transform:translate(-50%,0);opacity:1}
.kbd{display:inline-block;padding:1px 6px;border:1px solid #2c5c40;border-radius:5px;background:#10180f;color:#8fa596;font:500 11px 'JetBrains Mono';margin:0 2px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tick{animation:none;transform:none}
  .tcur{animation:none}
  .rv{opacity:1;transform:none;transition:none}
  .play .lit-a,.play .lit-b,.play .lit-c{animation:none;background:#3ddc84;border-color:#3ddc84}
  .kbtn,.gbtn,.hk,.toast{transition:none}
}

/* mobile — refined layout, fluid scale, safe areas */
@media (max-width:920px){
  .wrap{padding:0 20px}
  .navin{height:60px}
  .nav .kbtn{font-size:11.5px;padding:10px 16px;border-radius:10px;box-shadow:0 4px 0 #1a7a4a}
  .hero{padding:44px 0 60px;min-height:calc(100svh - 60px)}
  .herolayout{flex-direction:column;align-items:flex-start;gap:48px}
  .hlabel{margin-bottom:18px}
  .h1{font-size:clamp(27px,8vw,44px);min-height:1.15em}
  .tcur{margin-left:4px}
  .hsub{font-size:13.5px;margin:22px 0 32px}
  .noshrink{width:100%;display:flex;flex-direction:column;align-items:center}
  .hgrid{grid-template-columns:repeat(3,min(64px,17vw));grid-auto-rows:min(64px,17vw);gap:min(22px,5.5vw)}
  .hk{border-radius:16px}
  .hcap{margin-top:16px}
  .tickwrap{padding:11px 0}
  .tick span{font-size:11.5px;padding-right:44px}
  .sec{padding:64px 0}
  .shd{margin-bottom:36px}
  .prompt{width:auto;padding:18px 20px;gap:12px}
  .prompt a{font-size:clamp(14px,4.5vw,18px);word-break:break-all;min-height:0}
  .pdol{font-size:18px}
  .prompt .tcur{width:9px !important;height:18px !important}
  .ftr{padding:32px 0 max(32px,env(safe-area-inset-bottom))}
  .ftr .wrap{flex-direction:column;gap:18px;align-items:flex-start}
  .toast{white-space:normal;max-width:86vw;text-align:center;line-height:1.6;bottom:max(20px,env(safe-area-inset-bottom))}
}

/* touch devices — press states instead of hovers, no tap flash */
@media (pointer:coarse){
  a,.hk{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
  .hk:hover{transform:none;border-color:#1c2c21}
  .hgrid:active .hk{transform:translateY(4px)}
  .nlink:hover{color:#8fa596;background:none}
  .nlink:active{color:#e6efe9;background:#111a13}
}