:root{
    --bg:#0a0c0b; --stage:#060807; --panel:#101412; --panel2:#0c100e;
    --border:#1d2622; --border2:#283430;
    --text:#c9d8cf; --dim:#728579; --dim2:#4f5f57;
    --accent:#35f0a0; --accent-d:#1c9c66; --amber:#ffb454; --red:#ff6b6b;
    --track:#19211d;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{height:100%;}
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:"Noto Sans JP","JetBrains Mono",sans-serif;
    font-size:13px; overflow:hidden; -webkit-font-smoothing:antialiased;
    display:flex; flex-direction:column;
  }
  .mono{font-family:"JetBrains Mono",monospace;}

  /* ── top bar ── */
  header{
    flex:0 0 auto; display:flex; align-items:center; gap:14px;
    padding:10px 16px; background:linear-gradient(#0e1310,#0a0d0b);
    border-bottom:1px solid var(--border); position:relative; z-index:10;
  }
  header::after{ /* scanline texture on header */
    content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
    background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.25) 2px 3px);
  }
  .brand{font-family:"VT323","JetBrains Mono",monospace; font-weight:400; letter-spacing:.1em;
    font-size:23px; line-height:1; color:var(--accent); text-shadow:0 0 12px rgba(53,240,160,.45);
    display:flex; align-items:center; gap:9px; white-space:nowrap;}
  .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);
    box-shadow:0 0 10px var(--accent); animation:pulse 2.4s infinite ease-in-out;}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
  .brand span{font-family:"Noto Sans JP",sans-serif; color:var(--dim); font-weight:500; letter-spacing:.1em; font-size:11px; margin-left:6px;}
  header .spacer{flex:1;}
  /* PC ではラッパーを透過させてヘッダー直下の並びを維持。スマホでは2段目に回す */
  .header-actions{display:contents;}
  .res-badge{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--dim);
    border:1px solid var(--border2); padding:4px 9px; border-radius:5px; white-space:nowrap;}
  .res-badge b{color:var(--text); font-weight:500;}
  .src-note{color:var(--dim2); margin-left:5px;}

  button{font-family:inherit; cursor:pointer; border:none; color:inherit;}
  .btn{
    font-family:"JetBrains Mono",monospace; font-size:12px; font-weight:500;
    background:var(--panel); border:1px solid var(--border2); color:var(--text);
    padding:7px 13px; border-radius:6px; transition:.13s; white-space:nowrap;
    display:inline-flex; align-items:center; gap:6px;
  }
  .btn:hover{border-color:var(--accent-d); color:#fff;}
  .btn:active{transform:translateY(1px);}
  .btn.primary{background:var(--accent); color:#04130c; border-color:var(--accent); font-weight:700;}
  .btn.primary:hover{box-shadow:0 0 14px rgba(53,240,160,.45);}
  .btn.tiny{padding:5px 9px; font-size:11px;}

  /* ── main ── */
  main{flex:1; display:flex; min-height:0;}
  .stage{
    flex:1; position:relative; background:
      radial-gradient(ellipse at center, #0d110f 0%, var(--stage) 75%);
    display:flex; align-items:center; justify-content:center; padding:24px; min-width:0;
    overflow:hidden;
  }
  .stage::before{ content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55));}
  #glcanvas{
    max-width:100%; max-height:100%; border-radius:4px;
    box-shadow:0 18px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
    image-rendering:auto; touch-action:none;
  }
  /* フィルタ確認（押している間）：等倍デバイスピクセルで表示。stage の overflow:hidden で中央クロップ */
  #glcanvas.actual{max-width:none; max-height:none; border-radius:0; box-shadow:none;}
  .stage-tools{position:absolute; left:18px; bottom:16px; display:flex; gap:8px; z-index:5;}
  /* ボタンの下だと stage の overflow:hidden で見切れるため、ボタンの上に配置 */
  .stage-tools .hint{position:absolute; left:0; bottom:calc(100% + 6px); font-size:10.5px;
    color:var(--dim2); white-space:nowrap;
    text-shadow:0 1px 3px rgba(0,0,0,.7);}
  .compare-flag{position:absolute; top:14px; left:50%; transform:translateX(-50%);
    background:rgba(255,180,84,.16); border:1px solid var(--amber); color:var(--amber);
    font-family:"JetBrains Mono",monospace; font-size:11px; padding:4px 12px; border-radius:20px;
    opacity:0; transition:.15s; pointer-events:none; z-index:6;}
  .compare-flag.on{opacity:1;}
  .drop-over{position:absolute; inset:14px; border:2px dashed var(--accent); border-radius:10px;
    background:rgba(53,240,160,.07); display:none; align-items:center; justify-content:center;
    color:var(--accent); font-family:"JetBrains Mono",monospace; font-size:15px; z-index:20;
    backdrop-filter:blur(2px);}
  .drop-over.on{display:flex;}

  /* ── panel ── */
  .panel{
    flex:0 0 358px; background:var(--panel2); border-left:1px solid var(--border);
    display:flex; flex-direction:column; min-height:0;
  }
  .panel-scroll{overflow-y:auto; padding:14px 14px 40px; flex:1;}
  .panel-scroll::-webkit-scrollbar{width:9px;}
  .panel-scroll::-webkit-scrollbar-thumb{background:var(--border2); border-radius:5px;}
  .panel-scroll::-webkit-scrollbar-track{background:transparent;}

  .block{background:var(--panel); border:1px solid var(--border); border-radius:9px;
    padding:12px; margin-bottom:11px;}
  .block-title{font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--dim); margin:0 0 10px; display:flex; align-items:center; gap:7px;}
  .block-title::before{content:""; width:6px; height:6px; background:var(--accent-d);
    border-radius:50%; box-shadow:0 0 6px var(--accent-d);}

  /* パネル下部のサイトリンク */
  .sitelinks{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:18px; padding-top:14px;
    border-top:1px solid var(--border); font-size:11px; color:var(--dim2); letter-spacing:.02em;}
  .sitelinks a{color:var(--dim); text-decoration:none; transition:.15s;}
  .sitelinks a:hover{color:var(--accent);}
  .sitelinks span{color:var(--dim2);}

  /* preset + io */
  select.preset{width:100%; font-family:"JetBrains Mono",monospace; font-size:12.5px;
    background:var(--track); color:var(--text); border:1px solid var(--border2);
    border-radius:6px; padding:8px 32px 8px 10px; appearance:none; cursor:pointer;
    transition:border-color .13s, box-shadow .13s;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2335f0a0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 11px center;}
  select.preset:hover{border-color:var(--accent-d);}
  select.preset:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 2px rgba(53,240,160,.15);}
  .preset-hint{display:flex; align-items:center; gap:5px; font-size:10.5px; color:var(--dim);
    margin:7px 0 11px 2px;}
  .preset-hint b{color:var(--accent-d); font-weight:500;}
  .preset-hint .lucide{width:12px; height:12px; color:var(--accent-d);}
  .io-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px;}
  .io-grid .btn{justify-content:center; padding:7px 6px; font-size:11px;}
  .io-grid .full{grid-column:1/-1;}

  /* collapsible groups */
  details{margin-bottom:9px; border:1px solid var(--border); border-radius:9px;
    background:var(--panel); overflow:hidden;}
  details[open]{border-color:var(--border2);}
  summary{list-style:none; cursor:pointer; padding:11px 13px; display:flex; align-items:center;
    gap:8px; font-family:"JetBrains Mono",monospace; font-size:11px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--text); user-select:none;}
  summary::-webkit-details-marker{display:none;}
  summary .chev{margin-left:auto; color:var(--dim); transition:.2s; font-size:9px;}
  details[open] summary .chev{transform:rotate(90deg); color:var(--accent);}
  summary .gdot{width:6px;height:6px;border-radius:50%;background:var(--accent-d);box-shadow:0 0 6px var(--accent-d);}
  .group-body{padding:4px 13px 13px;}

  /* control rows */
  .ctrl{margin:13px 0;}
  .ctrl:first-child{margin-top:6px;}
  .ctrl-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px;}
  .ctrl-label{font-size:12px; color:var(--text); cursor:default;}
  .ctrl-val{font-family:"JetBrains Mono",monospace; font-size:11.5px; color:var(--accent);
    background:var(--track); padding:1px 7px; border-radius:4px; min-width:42px; text-align:center;
    cursor:pointer; border:1px solid transparent;}
  .ctrl-val:hover{border-color:var(--border2);}
  input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:4px;
    background:var(--track); border-radius:3px; outline:none; cursor:pointer;}
  input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:15px; height:15px;
    border-radius:50%; background:var(--accent); cursor:pointer; border:2px solid #06140d;
    box-shadow:0 0 8px rgba(53,240,160,.5); transition:.1s;}
  input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.18);}
  input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);
    border:2px solid #06140d; cursor:pointer;}

  select.mini{width:100%; font-family:"JetBrains Mono",monospace; font-size:12px;
    background:var(--track); color:var(--text); border:1px solid var(--border2);
    border-radius:6px; padding:7px 9px; appearance:none; cursor:pointer;}

  .text-input{width:100%; font-family:"Noto Sans JP","JetBrains Mono",sans-serif; font-size:12.5px;
    background:var(--track); color:var(--text); border:1px solid var(--border2);
    border-radius:6px; padding:7px 9px; outline:none; transition:border-color .13s;}
  .text-input:focus{border-color:var(--accent-d); box-shadow:0 0 0 2px rgba(53,240,160,.12);}
  .text-input::placeholder{color:var(--dim2);}

  .toggle{display:flex; align-items:center; justify-content:space-between;}
  .switch{position:relative; width:42px; height:23px; flex:0 0 auto;}
  .switch input{display:none;}
  .switch .track{position:absolute; inset:0; background:var(--track); border:1px solid var(--border2);
    border-radius:14px; transition:.18s;}
  .switch .knob{position:absolute; top:3px; left:3px; width:15px; height:15px; border-radius:50%;
    background:var(--dim); transition:.18s;}
  .switch input:checked + .track{background:rgba(53,240,160,.25); border-color:var(--accent-d);}
  .switch input:checked + .track .knob{left:21px; background:var(--accent); box-shadow:0 0 8px var(--accent);}

  input[type=color]{-webkit-appearance:none; appearance:none; width:46px; height:26px;
    border:1px solid var(--border2); border-radius:6px; background:none; cursor:pointer; padding:2px;}
  input[type=color]::-webkit-color-swatch-wrapper{padding:0;}
  input[type=color]::-webkit-color-swatch{border:none; border-radius:4px;}

  /* dropdown menu */
  .menu-wrap{position:relative;}
  .menu{position:absolute; right:0; top:calc(100% + 6px); background:var(--panel);
    border:1px solid var(--border2); border-radius:8px; padding:5px; min-width:172px;
    box-shadow:0 14px 40px rgba(0,0,0,.55); display:none; z-index:50;}
  .menu.on{display:block;}
  .menu button{display:flex; width:100%; text-align:left; background:none; border:none;
    color:var(--text); padding:8px 10px; border-radius:5px; font-size:12px; gap:8px; align-items:center;}
  .menu button:hover{background:var(--track); color:#fff;}
  .menu .sep{height:1px; background:var(--border); margin:4px 6px;}
  .menu .ic{color:var(--dim); width:14px; font-family:"JetBrains Mono",monospace;}

  /* modal */
  .modal-bg{position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(3px);
    display:none; align-items:center; justify-content:center; z-index:100; padding:20px;}
  .modal-bg.on{display:flex;}
  .modal{background:var(--panel); border:1px solid var(--border2); border-radius:12px;
    padding:18px; width:min(440px,100%); box-shadow:0 24px 70px rgba(0,0,0,.6);}
  .modal h3{margin:0 0 4px; font-family:"JetBrains Mono",monospace; font-size:13px; letter-spacing:.1em; color:var(--accent);}
  .modal p{margin:0 0 12px; font-size:12px; color:var(--dim);}
  .modal textarea{width:100%; height:130px; background:var(--track); border:1px solid var(--border2);
    border-radius:8px; color:var(--text); font-family:"JetBrains Mono",monospace; font-size:11px;
    padding:10px; resize:vertical; outline:none;}
  .modal textarea:focus{border-color:var(--accent-d);}
  .modal-foot{display:flex; gap:8px; justify-content:flex-end; margin-top:12px;}

  .toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px);
    background:var(--panel); border:1px solid var(--accent-d); color:var(--text);
    font-family:"JetBrains Mono",monospace; font-size:12px; padding:10px 18px; border-radius:8px;
    box-shadow:0 10px 30px rgba(0,0,0,.5); opacity:0; transition:.25s; z-index:200; pointer-events:none;}
  .toast.on{opacity:1; transform:translateX(-50%) translateY(0);}

  /* file input: 非表示にせず画面外へ（iOS WebViewでも確実に開くため） */
  .vh-input{position:fixed; width:1px; height:1px; opacity:0; left:-9999px; top:0; pointer-events:none;}

  /* save modal preview image */
  .save-img-wrap{margin:4px 0 2px; border:1px solid var(--border2); border-radius:8px;
    overflow:auto; max-height:46vh; background:repeating-conic-gradient(#0c0f0d 0% 25%,#10130f 0% 50%) 50%/16px 16px;}
  .save-img-wrap img{display:block; max-width:100%; height:auto; margin:0 auto;}
  .save-hint{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--amber);
    background:rgba(255,180,84,.10); border:1px solid rgba(255,180,84,.3); border-radius:7px; padding:8px 11px; margin:0 0 10px;}

  /* video export modal */
  .vrow{display:flex; align-items:center; gap:12px; margin:11px 0;}
  .vrow > span{flex:0 0 56px; font-size:12px; color:var(--text);}
  .vrow input[type=range]{flex:1;}
  .vrow > b{flex:0 0 auto; font-family:"JetBrains Mono",monospace; font-size:11.5px; color:var(--accent);
    background:var(--track); padding:2px 8px; border-radius:4px; min-width:46px; text-align:center; font-weight:500;}
  .vrow select.mini{flex:1;}
  .vstat{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--dim); margin:10px 0 6px; min-height:15px;}
  .vprogress{height:6px; background:var(--track); border-radius:4px; overflow:hidden; margin-bottom:4px;}
  .vbar{height:100%; width:0%; background:var(--accent); box-shadow:0 0 8px var(--accent); transition:width .12s linear;}
  .menu button:disabled{opacity:.4; cursor:not-allowed;}
  .menu button:disabled:hover{background:none; color:var(--text);}

  body{overflow-x:hidden;}

  /* responsive */
  @media (max-width:840px){
    main{flex-direction:column;}
    .panel{flex:1 1 auto; border-left:none; border-top:1px solid var(--border); max-height:54vh; max-width:100%;}
    .panel-scroll{max-width:100%;}
    .stage{flex:1 1 auto; min-height:36vh; padding:12px;}
    header{gap:8px 10px; padding:10px 12px; flex-wrap:wrap;}  /* 2段構成 */
    .brand{font-size:20px; letter-spacing:.08em;}            /* スマホでもロゴをしっかり */
    .brand span:not(.dot){display:none;}                     /* サブタイトルだけ隠す（左のドットは残す） */
    .res-badge{display:none;}            /* ヘッダーからは隠してパネルへ移動 */
    .res-line{display:block;}
    .btn{padding:8px 11px;}
    .btn.tiny{padding:6px 8px;}
    /* 1段目＝ロゴ＋使い方、2段目＝画像を開く／保存（2カラム） */
    .header-actions{display:flex; flex-basis:100%; width:100%; gap:8px;}
    .header-actions #openBtn{flex:1; justify-content:center;}
    .header-actions .menu-wrap{flex:1;}
    .header-actions .menu-wrap .btn.primary{width:100%; justify-content:center;}
  }
  .res-line{display:none; font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--dim);
    margin:-2px 0 9px; border:1px solid var(--border); border-radius:5px; padding:5px 9px; text-align:center;}
  .res-line b{color:var(--text); font-weight:500;}

  /* ── Lucide icons ── */
  .lucide{width:15px; height:15px; stroke-width:2; flex:0 0 auto; vertical-align:-2px;}
  .btn .lucide{width:15px; height:15px;}
  .btn.tiny .lucide{width:13px; height:13px;}
  .menu .ic .lucide{width:14px; height:14px;}
  .save-hint .lucide{width:17px; height:17px; color:var(--amber);}
  .chev .lucide{width:13px; height:13px; vertical-align:middle;}