:root{color-scheme:dark;--bg:#0c0b10;--panel:rgba(255,255,255,.07);--line:rgba(239,210,151,.26);--text:#f8f1e4;--muted:#b9ad9c;--gold:#d7b56d;--gold-strong:#f1d58c;font-family:"Yu Gothic","Noto Sans JP",system-ui,sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 18% 12%,rgba(215,181,109,.16),transparent 30%),radial-gradient(circle at 84% 8%,rgba(142,36,52,.18),transparent 34%),linear-gradient(135deg,#0b0a0f,#17121b 48%,#08070b);color:var(--text)}a{color:inherit;text-decoration:none}.page-shell{width:min(1260px,calc(100% - 40px));margin:0 auto;padding:34px 0 82px}.hero{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:38px;background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.025));box-shadow:0 24px 80px rgba(0,0,0,.46)}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 22%,rgba(241,213,140,.22),transparent 28%),radial-gradient(circle at 86% 80%,rgba(142,36,52,.28),transparent 32%),linear-gradient(90deg,rgba(12,11,16,.92),rgba(12,11,16,.55),rgba(12,11,16,.9))}.hero-inner{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:36px;padding:52px;align-items:center}.brand-mark{display:inline-flex;gap:12px;align-items:center;padding:9px 14px;border:1px solid rgba(215,181,109,.34);border-radius:999px;color:var(--gold-strong);background:rgba(0,0,0,.22);letter-spacing:.14em;font-size:12px;text-transform:uppercase}.brand-orb{width:10px;height:10px;border-radius:50%;background:var(--gold-strong);box-shadow:0 0 18px rgba(241,213,140,.8)}h1{margin:22px 0 18px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(44px,7vw,84px);line-height:.92;letter-spacing:-.045em}.lead,.section-note{color:var(--muted);line-height:1.9}.lead{max-width:720px;font-size:17px;margin:0}.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid rgba(215,181,109,.42);border-radius:999px;background:rgba(215,181,109,.12);color:var(--text);font-size:14px;cursor:pointer;transition:.16s}.button:hover{transform:translateY(-1px);background:rgba(215,181,109,.18);border-color:rgba(241,213,140,.75)}.button.primary{background:linear-gradient(135deg,#f1d58c,#b98a42);color:#14100a;border-color:transparent;font-weight:700}.hero-actions,.card-actions,.beginner-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}.hero-art{position:relative;min-height:430px}.art-frame{position:absolute;border:1px solid rgba(241,213,140,.34);border-radius:28px;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.03)),radial-gradient(circle at 18% 18%,rgba(241,213,140,.28),transparent 36%),linear-gradient(160deg,rgba(39,25,32,.84),rgba(9,8,13,.94));box-shadow:0 18px 80px rgba(0,0,0,.35)}.art-frame:nth-child(1){width:78%;height:66%;left:11%;top:2%;transform:rotate(-4deg)}.art-frame:nth-child(2){width:72%;height:56%;right:0;bottom:9%;transform:rotate(5deg)}.art-frame:nth-child(3){width:56%;height:44%;left:0;bottom:0;transform:rotate(-1deg)}.art-label{position:absolute;left:26px;bottom:24px;color:rgba(248,241,228,.88)}.art-label strong{display:block;font-family:Georgia,serif;font-size:28px}.art-label span{display:block;margin-top:6px;color:var(--muted);font-size:13px;letter-spacing:.08em}.section{margin-top:44px}.section-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:20px}.section h2{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(28px,4vw,44px);letter-spacing:-.03em}.grid{display:grid;gap:18px}.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.card{position:relative;overflow:hidden;min-height:220px;padding:24px;border:1px solid rgba(255,255,255,.10);border-radius:28px;background:var(--panel);box-shadow:0 16px 48px rgba(0,0,0,.28)}.card:before{content:"";position:absolute;inset:-1px;background:radial-gradient(circle at 20% 0%,rgba(241,213,140,.13),transparent 32%),radial-gradient(circle at 85% 100%,rgba(147,183,212,.10),transparent 34%)}.card>*{position:relative;z-index:1}.card-kicker{color:var(--gold-strong);font-size:12px;letter-spacing:.13em;text-transform:uppercase}.card h3{margin:12px 0 10px;font-size:22px}.card p{margin:0;color:var(--muted);line-height:1.75;font-size:14px}.thumb{height:100px;border-radius:18px;border:1px solid rgba(215,181,109,.26);background:#111}.theme-gallery-frame{background:radial-gradient(circle at 18% 20%,rgba(241,213,140,.34),transparent 30%),linear-gradient(135deg,rgba(86,34,45,.9),rgba(11,10,15,.9))}.theme-cyber-hud{background:repeating-linear-gradient(115deg,rgba(61,255,216,.18) 0 2px,transparent 2px 24px),radial-gradient(circle at 82% 70%,rgba(255,61,170,.24),transparent 30%),linear-gradient(135deg,#031016,#040406)}.theme-japanese-modern{background:radial-gradient(circle at 72% 22%,rgba(255,242,195,.42),transparent 10%),linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 18%),linear-gradient(135deg,#061024,#0f1624)}.theme-magazine-layout{background:linear-gradient(90deg,rgba(255,255,255,.10) 0 1px,transparent 1px 25%),linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 33%),linear-gradient(135deg,#21150f,#100d0b)}.theme-floating-card{background:radial-gradient(circle at 20% 18%,rgba(124,242,255,.28),transparent 26%),radial-gradient(circle at 80% 72%,rgba(142,115,255,.22),transparent 30%),linear-gradient(135deg,#061018,#09080c)}.theme-stage-live{background:linear-gradient(90deg,rgba(95,12,28,.54) 0 10%,transparent 10% 20%,rgba(95,12,28,.54) 20% 30%,transparent 30% 40%,rgba(95,12,28,.54) 40% 50%,transparent 50% 60%,rgba(95,12,28,.54) 60% 70%,transparent 70% 80%,rgba(95,12,28,.54) 80% 90%,transparent 90%),radial-gradient(ellipse at 24% 0%,rgba(255,214,116,.42),transparent 34%),linear-gradient(135deg,#23060b,#09060a)}.theme-minimal-premium{background:linear-gradient(135deg,#08080a,#1b1917)}.theme-cute-sticker{background:radial-gradient(circle at 18% 20%,rgba(255,204,104,.38),transparent 14%),radial-gradient(circle at 76% 24%,rgba(255,122,168,.34),transparent 16%),radial-gradient(circle at 64% 78%,rgba(91,227,255,.22),transparent 15%),linear-gradient(135deg,#241a2b,#120f16)}.pill-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.pill,.size-chip{padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);color:var(--muted);font-size:12px}.gallery-list{display:grid;gap:16px}.item-row{display:grid;grid-template-columns:120px 1fr auto;gap:18px;align-items:center;padding:16px;border:1px solid rgba(255,255,255,.10);border-radius:22px;background:rgba(255,255,255,.055)}.step-list{display:grid;gap:14px;counter-reset:step}.step-card{position:relative;padding:18px 18px 18px 64px;border:1px solid rgba(255,255,255,.10);border-radius:22px;background:rgba(0,0,0,.18)}.step-card:before{counter-increment:step;content:counter(step);position:absolute;left:18px;top:18px;width:32px;height:32px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(135deg,#f1d58c,#b98a42);color:#14100a;font-weight:700}.step-card h3{margin:0 0 8px;font-size:20px}.step-card p{margin:0;color:var(--muted);line-height:1.75}.public-note{margin-top:14px;padding:14px 16px;border:1px solid rgba(241,213,140,.22);border-radius:18px;background:rgba(0,0,0,.22);color:var(--muted);line-height:1.75}.category-block{margin-top:34px}.category-title{display:flex;align-items:center;gap:12px;margin-bottom:14px}.category-title h2{font-size:clamp(24px,3vw,34px)}.preview-only-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.preview-tile{position:relative;display:block;overflow:hidden;border:1px solid rgba(255,255,255,.11);border-radius:26px;background:rgba(255,255,255,.055);box-shadow:0 16px 48px rgba(0,0,0,.26)}.preview-tile iframe{display:block;width:100%;height:230px;border:0;background:#08070c;pointer-events:none}.preview-tile-label{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 16px;border-top:1px solid rgba(255,255,255,.08)}.preview-tile-label strong{font-size:16px}.preview-tile-label span{color:var(--muted);font-size:12px}.preview-tile:after{content:"詳細を開く";position:absolute;left:14px;top:14px;padding:7px 10px;border-radius:999px;background:rgba(0,0,0,.62);border:1px solid rgba(241,213,140,.34);color:var(--gold-strong);font-size:12px;opacity:0;transition:.16s}.preview-tile:hover:after{opacity:1}.part-detail-layout{display:grid;grid-template-columns:minmax(420px,1.12fr) minmax(340px,.88fr);gap:24px;align-items:start}.part-detail-preview{border:1px solid rgba(241,213,140,.24);border-radius:26px;overflow:hidden;background:rgba(0,0,0,.26)}.part-detail-preview iframe{display:block;width:100%;height:560px;border:0;background:#08070c}.part-detail-panel{padding:24px;border:1px solid rgba(255,255,255,.10);border-radius:26px;background:rgba(255,255,255,.055)}.recommend-box,.obs-action-card{margin-top:18px;padding:16px;border:1px solid rgba(255,255,255,.10);border-radius:20px;background:rgba(0,0,0,.18)}.recommend-box-title,.obs-action-title{color:var(--gold-strong);font-weight:700;margin-bottom:10px}.size-line{display:flex;flex-wrap:wrap;gap:8px}.obs-action-note{color:var(--muted);line-height:1.7;font-size:13px;margin-bottom:14px}.obs-action-buttons{display:grid;gap:10px}.obs-drag-card{display:grid;place-items:center;min-height:48px;border:1px dashed rgba(241,213,140,.62);border-radius:16px;background:radial-gradient(circle at 20% 18%,rgba(241,213,140,.16),transparent 32%),rgba(0,0,0,.24);color:var(--gold-strong);cursor:grab}.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(16px);opacity:0;pointer-events:none;padding:12px 16px;border:1px solid rgba(241,213,140,.38);border-radius:999px;background:rgba(8,7,10,.92);color:var(--text);box-shadow:0 16px 60px rgba(0,0,0,.42);transition:.18s;z-index:1000}.toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}.layout-shell{border:1px solid rgba(241,213,140,.24);border-radius:24px;background:rgba(0,0,0,.26);padding:18px;overflow:hidden}.layout-canvas{position:relative;width:100%;aspect-ratio:var(--canvas-ratio,16/9);border:1px solid rgba(241,213,140,.28);border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.015));overflow:hidden}.layout-source{position:absolute;border:1px solid rgba(241,213,140,.62);border-radius:10px;background:rgba(215,181,109,.10);color:var(--text);font-size:11px;padding:6px;overflow:hidden}.layout-source strong{display:block;color:var(--gold-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.footer{margin-top:44px;padding:24px;border-top:1px solid rgba(255,255,255,.10);color:var(--muted);font-size:13px}@media(max-width:1000px){.grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}.preview-only-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:860px){.hero-inner,.grid.cols-2,.grid.cols-3,.grid.cols-4,.preview-only-grid,.part-detail-layout{grid-template-columns:1fr}.item-row{grid-template-columns:1fr}.section-head{display:block}.hero-inner{padding:32px}.hero-art{min-height:300px}.part-detail-preview iframe{height:380px}}


/* v18: active resolution selection and production-style previews */
.profile-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.profile-buttons .button.is-active,
.profile-buttons .button[aria-current="true"] {
  background: linear-gradient(135deg, #f1d58c, #b98a42);
  color: #14100a;
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(241,213,140,.18), 0 0 24px rgba(241,213,140,.20);
}
.current-profile {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  padding: 8px 13px;
  border: 1px solid rgba(241,213,140,.28);
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  color: var(--gold-strong);
  font-size: 13px;
  letter-spacing: .04em;
}
.preview-tile iframe {
  background: #06050a;
}
.preview-tile-label span::before {
  content: "文字なし / ";
  color: var(--gold-strong);
}
.part-detail-panel .public-note {
  border-color: rgba(124,242,255,.18);
}


/* v19 ratio-aware preview and size selection */
.profile-status {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(241,213,140,.28);
  border-radius: 999px;
  background: rgba(0,0,0,.24);
  color: var(--muted);
  font-size: 13px;
}

.profile-buttons .button.is-active,
.size-choice.is-active {
  background: linear-gradient(135deg,#f1d58c,#b98a42);
  color: #14100a;
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 0 20px rgba(241,213,140,.20);
}

.preview-only-grid.ratio-grid {
  align-items: start;
}

.preview-tile {
  display: flex;
  flex-direction: column;
}

.preview-tile-frame {
  position: relative;
  width: 100%;
  height: var(--tile-h, 230px);
  min-height: var(--tile-min-h, 120px);
  max-height: var(--tile-max-h, 360px);
  background: #08070c;
  overflow: hidden;
}

.preview-tile-frame iframe {
  width: 100%;
  height: 100%;
}

.preview-tile.part-clock { grid-column: span 1; }
.preview-tile.part-scene-frame { grid-column: span 2; }
.preview-tile.part-horizontal-frame { grid-column: span 2; }
.preview-tile.part-ticker-rail { grid-column: span 3; }
.preview-tile.part-feature-plate { grid-column: span 2; }
.preview-tile.part-list-board { grid-column: span 1; }
.preview-tile.part-grid-board { grid-column: span 2; }

.preview-tile.part-clock .preview-tile-frame { --tile-h: 210px; }
.preview-tile.part-scene-frame .preview-tile-frame { --tile-h: 260px; }
.preview-tile.part-vertical-frame .preview-tile-frame { --tile-h: 360px; }
.preview-tile.part-horizontal-frame .preview-tile-frame { --tile-h: 180px; }
.preview-tile.part-ticker-rail .preview-tile-frame { --tile-h: 86px; --tile-min-h: 70px; --tile-max-h: 118px; }
.preview-tile.part-feature-plate .preview-tile-frame { --tile-h: 230px; }
.preview-tile.part-list-board .preview-tile-frame { --tile-h: 340px; }
.preview-tile.part-grid-board .preview-tile-frame { --tile-h: 260px; }

.size-choice-grid {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.size-choice {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid rgba(241,213,140,.28);
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.size-choice strong {
  display: block;
  font-size: 14px;
}

.size-choice span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.selected-size-box {
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(241,213,140,.24);
  border-radius: 16px;
  background: rgba(0,0,0,.20);
  color: var(--muted);
  line-height: 1.6;
}

.selected-size-box strong {
  color: var(--gold-strong);
}

@media (max-width: 1000px) {
  .preview-tile.part-scene-frame,
  .preview-tile.part-horizontal-frame,
  .preview-tile.part-ticker-rail,
  .preview-tile.part-feature-plate,
  .preview-tile.part-grid-board {
    grid-column: span 2;
  }
}

@media (max-width: 860px) {
  .preview-tile.part-scene-frame,
  .preview-tile.part-horizontal-frame,
  .preview-tile.part-ticker-rail,
  .preview-tile.part-feature-plate,
  .preview-tile.part-grid-board {
    grid-column: span 1;
  }
}



/* v20 simple URL mode */
.size-reference-grid {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.size-reference-card {
  padding: 12px 14px;
  border: 1px solid rgba(241,213,140,.22);
  border-radius: 14px;
  background: rgba(255,255,255,.055);
}

.size-reference-card strong {
  display: block;
  color: var(--text);
  font-size: 14px;
}

.size-reference-card span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.simple-url-note {
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(241,213,140,.24);
  border-radius: 16px;
  background: rgba(0,0,0,.20);
  color: var(--muted);
  line-height: 1.65;
}

.simple-url-note strong {
  color: var(--gold-strong);
}

.obs-drag-card.native-link {
  text-decoration: none;
}


/* v21 public wording pages */
.simple-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.simple-flow .card {
  min-height: 180px;
}

@media (max-width: 860px) {
  .simple-flow {
    grid-template-columns: 1fr;
  }
}


/* v22 resolution-based size guide and unified preview frame */
.resolution-size-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(0,0,0,.18);
  margin-top: 14px;
}

.resolution-size-table th,
.resolution-size-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-align: left;
  vertical-align: top;
  font-size: 13px;
}

.resolution-size-table th {
  color: var(--gold-strong);
  background: rgba(241,213,140,.08);
  font-weight: 700;
}

.resolution-size-table tr:last-child td {
  border-bottom: 0;
}

.resolution-size-table .size-value {
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}

.resolution-size-table .size-note {
  color: var(--muted);
  line-height: 1.55;
}

.gallery-preview-frame,
.preview-tile-frame,
.part-detail-preview {
  border: 1px solid rgba(241,213,140,.24);
  border-radius: 26px;
  background:
    radial-gradient(circle at 12% 12%, rgba(241,213,140,.08), transparent 28%),
    rgba(0,0,0,.26);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 16px 48px rgba(0,0,0,.24);
}

.preview-tile-frame {
  position: relative;
}

.part-detail-preview {
  padding: 0;
}

.part-detail-preview iframe,
.preview-tile-frame iframe {
  display: block;
  width: 100%;
  border: 0;
  background: #08070c;
}

.part-detail-preview iframe {
  height: 560px;
}

.preview-tile-frame iframe {
  height: 100%;
}

.preview-tile {
  background: rgba(255,255,255,.045);
}

.size-reference-grid {
  display: block;
}

@media (max-width: 860px) {
  .resolution-size-table th,
  .resolution-size-table td {
    padding: 10px 9px;
    font-size: 12px;
  }

  .part-detail-preview iframe {
    height: 380px;
  }
}