:root{
  --panel:#2b2b2e; --panel2:#232326; --steel:#3a3a3e;
  --lcd-bg:#1a2410; --lcd-fg:#9fd63a; --lcd-dim:#4a5d28;
  --pad:#c8c4bc; --pad-hi:#efe9dd; --accent:#c33;
}
*{box-sizing:border-box; margin:0; padding:0;}
button:focus{outline:none;}
button:focus-visible{outline:2px solid #6b8; outline-offset:1px;}  /* キーボード操作時のみ */
body{background:#151517; color:#ddd; font-family:-apple-system,"Helvetica Neue",Arial,sans-serif;
     display:flex; flex-direction:column; align-items:center; padding:24px 12px;}
.unit{background:var(--panel); border-radius:10px; padding:20px; max-width:900px; width:100%;
      box-shadow:0 10px 40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);}
/* 右上＝機種記述＋開発情報の銘板エリア（左上は空けておく） */
.brand{display:flex; justify-content:flex-end; margin-bottom:14px;}
/* ノブ群＝左下（トランスポート下〜シルク上）。margin-top:autoを両方に効かせて余白を等分 */
.knobs{display:flex; gap:4px; align-items:flex-start; justify-content:center; margin-top:auto;}
/* ユニット全体が掴み判定（ノブ単体では掴みにくい）。
   幅固定96px＝ラベル長に依存せずノブ中心を等ピッチ100pxに揃える（3×96+2×4=296<308） */
.knobunit{display:flex; flex-direction:column; align-items:center; gap:6px; width:96px;
          cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none;
          padding:2px 0 8px;}
.klbl{font-size:8px; letter-spacing:1px; color:#777; white-space:nowrap;}
/* 目盛りリング：270°スイープに11目盛（4°幅の放射線をノブがはみ出す3px分だけ見せる） */
.kscale{width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
      background:conic-gradient(from -137deg,
        #606066 0 4deg,        transparent 4deg 27deg,
        #606066 27deg 31deg,   transparent 31deg 54deg,
        #606066 54deg 58deg,   transparent 58deg 81deg,
        #606066 81deg 85deg,   transparent 85deg 108deg,
        #606066 108deg 112deg, transparent 112deg 135deg,
        #606066 135deg 139deg, transparent 139deg 162deg,
        #606066 162deg 166deg, transparent 166deg 189deg,
        #606066 189deg 193deg, transparent 193deg 216deg,
        #606066 216deg 220deg, transparent 220deg 243deg,
        #606066 243deg 247deg, transparent 247deg 270deg,
        #606066 270deg 274deg, transparent 274deg 360deg);}
.kscale.sm{width:44px; height:44px; margin:6px 0;}  /* (56-44)/2=6 → 大ノブと軸中心を揃える */
.knob{width:46px; height:46px; border-radius:50%; position:relative; cursor:grab; touch-action:none;
      background:radial-gradient(circle at 35% 30%, #4a4a4e, #232326);
      border:2px solid #141416;
      box-shadow:0 3px 6px rgba(0,0,0,.5), inset 0 1px 2px rgba(255,255,255,.15);}
.knob.sm{width:34px; height:34px;}
.knob .ind{position:absolute; inset:0;}
.knob .ind::before{content:""; position:absolute; left:50%; top:4px; width:3px; height:12px;
      margin-left:-1.5px; background:#e0e0e0; border-radius:2px;}
.knob.sm .ind::before{height:9px;}
.devinfo{text-align:right;}
.devinfo .machine{color:#777; font-size:11px; letter-spacing:2px;}
.devinfo .dev{color:#555; font-size:10px; letter-spacing:1px; margin-top:3px;
              font-family:"Menlo","Consolas",monospace;}
.top{display:flex; gap:18px; flex-wrap:wrap;}

/* ===== LCD: 40桁×8行の固定窓（フォント固定→窓寸法も固定） ===== */
.lcd-wrap{flex:0 0 auto;}
pre#lcd{background:var(--lcd-bg); color:var(--lcd-fg); border:6px solid #111;
        border-radius:4px; padding:12px 14px; font:12.5px/1.45 "Menlo","Consolas",monospace;
        white-space:pre; overflow:hidden; text-shadow:0 0 4px rgba(159,214,58,.35);
        width:520px; height:calc(8 * 1.45em + 24px + 12px); text-align:center;}
#lcdTxt{display:inline-block; transform-origin:50% 50%;}
/* カーソル＝フィールド反転（点滅はJS側：再描画でCSSアニメがリセットされるため） */
#lcdTxt .cur{background:var(--lcd-fg); color:var(--lcd-bg); text-shadow:none;}
.softkeys{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:8px;}
.softkeys button{background:var(--steel); color:#ccc; border:1px solid #1c1c1e; border-bottom:3px solid #1c1c1e;
        border-radius:4px; padding:0 2px; font-size:10px; cursor:pointer; height:34px;}
.softkeys button:empty{opacity:.45; cursor:default;}   /* ラベル未割当＝非活性を見た目で伝える */

/* ===== right control block（LCD列と高さを揃えるコンパクト構成） ===== */
.ctrl{flex:1 1 280px; min-width:260px; display:flex; flex-direction:column; gap:10px;}
.key{background:var(--steel); color:#ccc; border:1px solid #1c1c1e; border-bottom:3px solid #1c1c1e;
     border-radius:4px; padding:5px 6px; font-size:9.5px; cursor:pointer; line-height:1.25;}
.key:active{transform:translateY(1px);}
.key.on{background:#5a3030; color:#ffb0b0;}
.keyrow{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
.keyrow .key{height:34px; padding:0 4px;}
/* flex:1＋中央揃え：LCD列との下端差を上下対称の余白として吸収する */
.entry{display:flex; gap:12px; align-items:center; justify-content:space-between; flex:1;}
.cursor-pad{display:flex; flex-direction:column; align-items:center; gap:4px;}
.cursor-pad > div{display:flex; gap:18px;}
.cursor-pad .key{width:30px; height:28px; padding:0;}
.wheelbox{display:flex; flex-direction:column; align-items:center; gap:6px;}
.lbl{font-size:9px; letter-spacing:1.5px; color:#888; white-space:nowrap;}
.wheel{width:86px; height:86px; border-radius:50%; position:relative; cursor:grab; touch-action:none;
      background:repeating-conic-gradient(#4c4c50 0 6deg, #313134 6deg 12deg);
      border:4px solid #1c1c1e;
      box-shadow:0 4px 10px rgba(0,0,0,.6), inset 0 2px 4px rgba(255,255,255,.12);}
.wheel::after{content:""; position:absolute; inset:19px; border-radius:50%;
      background:radial-gradient(circle at 35% 30%, #4a4a4e, #28282b); border:1px solid #18181a;
      box-shadow:inset 0 2px 5px rgba(0,0,0,.5);}
.wheel .dot{position:absolute; left:50%; top:8px; width:6px; height:6px; margin-left:-3px; border-radius:50%;
      background:#141414; box-shadow:inset 0 1px 2px #000;}
.pm{display:flex; gap:8px;}
.pm .key{width:34px;}
.numpad{display:grid; grid-template-columns:repeat(3,36px); gap:5px;}
.numpad .key{height:28px; padding:0;}
.numpad .wide{grid-column:span 2;}
/* 1行固定：内容が伸びても折り返さず省略（レイアウトを動かさない） */
.stat{font-size:10px; color:#666; line-height:1.6; margin-top:auto; height:16px;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}

/* ===== transport cluster（下段左・実機配置。キーキャップは他と同型） ===== */
/* 左列＝(フェーダー｜トランスポート) の下にブランドシルク（ロゴ確定までの仮置き） */
.leftcol{display:flex; flex-direction:column; align-self:stretch;}
.lefttop{display:flex; gap:18px;}
.silk{margin-top:auto; padding:0; margin-bottom:-2px; text-align:center;}
/* 2行の視覚幅を揃えた銘板ロックアップ（実測172px。字間・微調整は実測スクショからの逆算） */
.silk .b{font-size:48px; font-weight:800; letter-spacing:22px; text-indent:22px; color:#e6e4de; line-height:1;}
.silk .m{font-size:15px; letter-spacing:18px; text-indent:18px; color:#98948c; margin-top:10px; margin-left:-2px;}
/* 1段目のボタンをフェーダー上端・パッド1段目と同じ高さから開始（46 = 34 + 12） */
.tcluster{display:grid; grid-template-columns:repeat(2,98px); gap:8px; align-self:flex-start;
          align-content:start; padding-top:46px;}
/* 縦52×4段+隙間8×3=232 → フェーダー列（トラック152+12+ASSIGN28+12+AFTER28=232）と下端が揃う */
.tcluster button{height:52px; font-size:10px; font-weight:600; letter-spacing:1px;
        background:var(--steel); color:#ddd; border:1px solid #1c1c1e; border-bottom:3px solid #1c1c1e;
        border-radius:4px; cursor:pointer;}
.tcluster button:active{transform:translateY(1px);}
.tcluster button.small{font-weight:400;}
/* 刻印色：押す前から機能が読める（実機のREC赤・PLAY緑の刻印に相当） */
#btnRec,#btnOD{color:#d99;}
#btnPlay,#btnPlayStart{color:#9c9;}
.tcluster .wide{grid-column:span 2;}
#btnPlay.on,#btnPlayStart.on{background:#2e4d2e; color:#a6f0a6;}
#btnOD.on,#btnRec.on{background:#5a2020; color:#ff9c9c;}

/* トグル系（12bit/40k・CLICK・FULL LEVEL）＝実機流のLEDインジケーターで状態を示す */
#btnVintage,#btnClick{position:relative; padding-top:12px;}  /* LED下の残り領域で文字をセンターに */
#kFull{position:relative;}
#btnVintage::before,#btnClick::before,#kFull::before{content:""; position:absolute;
      top:6px; left:50%; width:6px; height:6px; margin-left:-3px; border-radius:50%;
      background:#3a1414; box-shadow:inset 0 1px 1px rgba(0,0,0,.7);}
#btnVintage.on::before,#btnClick.on::before,#kFull.on::before{
      background:#f43; box-shadow:0 0 6px rgba(255,70,50,.9);}
#btnVintage.on,#btnClick.on{color:#fff;}
#kFull.on{background:var(--steel); color:#fff;}   /* .key.onの赤地よりLED点灯を主役に */

/* 未実装の操作子（AFTER・RECORD LEVEL）：減光して「まだ生きていない」ことを示す */
.dead{opacity:.5;}
/* ノブは本体だけ減光（ユニット全体だとラベルの色が濁る） */
.knobunit.dead{opacity:1;}
.knobunit.dead .kscale{opacity:.5;}

/* ===== deck: NV slider | pads ===== */
/* 合計幅を本体(860px)内に収める：nv 86 + tcluster 204 + padcol 520 + gap 36 = 846 */
.deck{display:flex; gap:18px; margin-top:20px; justify-content:center; align-items:flex-start; flex-wrap:wrap;}
.nv{display:flex; flex-direction:column; align-items:center; gap:12px; flex:0 0 86px; width:86px;}
.nv .lbl{height:34px; display:flex; align-items:center;}   /* PAD BANK行と同じ帯 */
.nv-track{width:34px; height:152px; background:#1c1c1e; border-radius:4px; position:relative;
      box-shadow:inset 0 2px 6px #000; touch-action:none;}
.nv-track::before{content:""; position:absolute; left:50%; top:8px; bottom:8px; width:4px; margin-left:-2px;
      background:#0a0a0a; border-radius:2px;}
/* 目盛り：キャップ可動域(8px〜144px)に11本、左右対称のシルク線 */
.nv-track::after{content:""; position:absolute; left:-9px; right:-9px; top:8px; bottom:8px;
      background-image:repeating-linear-gradient(180deg, #606066 0 1px, transparent 1px 13.5px),
                       repeating-linear-gradient(180deg, #606066 0 1px, transparent 1px 13.5px);
      background-size:5px 100%; background-repeat:no-repeat;
      background-position:left top, right top;}
.nv-cap{position:absolute; left:50%; transform:translate(-50%,-50%); width:30px; height:16px;
      background:linear-gradient(#6a6a6e,#3a3a3e 45%,#222 55%,#48484c); border:1px solid #111; border-radius:2px;
      box-shadow:0 2px 4px rgba(0,0,0,.6); cursor:grab;}
.cap{font-size:9px; color:#555; text-align:center;}
.padcol{flex:0 1 520px; max-width:520px; display:flex; flex-direction:column;}
.padtop{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px;}
.padtop .key{height:34px;}   /* ソフトキーと同じキー高で統一 */
.pads{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.pad{aspect-ratio:1; background:var(--pad); border-radius:6px; cursor:pointer; position:relative;
     border:1px solid #888; border-bottom:5px solid #979289;
     box-shadow:inset 0 2px 6px rgba(255,255,255,.5), 0 3px 6px rgba(0,0,0,.45);
     user-select:none; -webkit-user-select:none; touch-action:none;}
.pad.lit{background:var(--pad-hi); box-shadow:0 0 18px rgba(255,240,200,.8), inset 0 2px 6px #fff;}
.pad .tag{position:absolute; bottom:5px; left:7px; font-size:9px; color:#555;}
.pad .key{position:absolute; top:5px; right:7px; font-size:9px; color:#999;
          background:none; border:none; padding:0; cursor:inherit;}
/* 筐体の外の説明文（盤面に説明シールを貼らない） */
.note{margin-top:14px; font-size:11px; color:#777; line-height:1.7; width:100%; max-width:900px;}
/* 画面幅が足りないときの案内。盤面は最大900px、内側のLCDが520px固定・操作列が最低260pxなので
   実質 820px 前後を切ると横にはみ出す。縮小して収める案は使えない（パッドとキーが押せなくなる）ので、
   入らないことを隠さず伝える */
.narrow{display:none;}
@media (max-width:880px){
  .narrow{display:block; width:100%; max-width:900px; margin:0 0 16px; padding:14px 16px;
    border-radius:8px; background:#1f1f22; border:1px solid #33333a; border-left:3px solid #c9a227;
    font-size:12px; line-height:1.8; color:#9a968c;}
  .narrow b{color:#ddd; display:block; margin-bottom:4px; letter-spacing:.06em;}
}
/* 免責＝筐体の外に置くテキスト（盤面に説明シールを貼らない） */
.legal{margin:18px 0 40px; font-size:10px; color:#5c5c5c; line-height:1.8; width:100%; max-width:900px;}
.legal p{margin:0 0 6px;}
kbd{background:#333; border-radius:3px; padding:0 4px; font-size:10px;}