:root{
  color-scheme:light dark;
  --bg:#eef1f5;--panel:rgba(255,255,255,.82);--text:#17202a;--muted:#687383;
  --border:rgba(15,23,42,.12);--input:#fff;--accent:#2f6fed;--shadow:0 18px 60px rgba(15,23,42,.12)
}
*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Inter,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;background:radial-gradient(circle at 10% 10%,#fff 0,transparent 28%),linear-gradient(135deg,#edf2f7,#dfe7ef);color:var(--text)}
body[data-theme="dark"]{--bg:#101317;--panel:rgba(25,29,35,.9);--text:#f3f5f7;--muted:#9da8b6;--border:rgba(255,255,255,.1);--input:#181d23;--shadow:0 18px 60px rgba(0,0,0,.38);background:radial-gradient(circle at 10% 10%,#27313d 0,transparent 25%),linear-gradient(135deg,#11151a,#1c232b)}
button,input,textarea{font:inherit}.app-shell{width:min(1500px,calc(100% - 32px));margin:32px auto;display:grid;grid-template-columns:minmax(360px,520px) minmax(0,1fr);gap:24px;align-items:start}.panel{background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);backdrop-filter:blur(24px);border-radius:24px}.controls{padding:26px;position:sticky;top:20px}.preview-panel{padding:26px;overflow:hidden}.brand-row,.preview-heading,.actions{display:flex;align-items:center;justify-content:space-between;gap:16px}.eyebrow{margin:0 0 4px;color:var(--muted);font-size:11px;letter-spacing:.18em;font-weight:800}h1,h2{margin:0}h1{font-size:28px}h2{font-size:22px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0}.wide{grid-column:1/-1}label{display:grid;gap:7px;color:var(--muted);font-size:12px;font-weight:700}input[type="text"],input[type="url"],textarea,input[type="file"]{width:100%;border:1px solid var(--border);background:var(--input);color:var(--text);border-radius:12px;padding:11px 12px;outline:none}textarea{resize:vertical;min-height:84px}input:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}input[type="file"]{padding:8px;font-size:11px}.option-grid{display:grid;gap:12px}.opacity-control legend{display:flex;justify-content:space-between;align-items:center}.opacity-control output{color:var(--text);font-variant-numeric:tabular-nums}.opacity-control input[type="range"]{width:100%;accent-color:var(--accent);cursor:pointer}fieldset{margin:0;padding:0;border:0}legend{margin-bottom:7px;color:var(--muted);font-size:12px;font-weight:800}.segmented{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:13px;background:color-mix(in srgb,var(--text) 7%,transparent)}.segmented input{display:none}.segmented span{display:block;text-align:center;padding:9px;border-radius:10px;color:var(--muted);cursor:pointer}.segmented input:checked+span{background:var(--input);color:var(--text);box-shadow:0 3px 10px rgba(0,0,0,.08)}.actions{margin-top:20px}.actions button{flex:1}.primary,.secondary,.ghost{border:0;border-radius:12px;padding:12px 16px;font-weight:800;cursor:pointer}.primary{background:var(--accent);color:#fff}.secondary{background:color-mix(in srgb,var(--accent) 13%,var(--input));color:var(--accent)}.ghost{background:transparent;color:var(--muted);padding:8px 10px}.danger:hover{color:#e34850}.status{min-height:18px;margin:10px 0 0;text-align:center;color:var(--muted);font-size:12px}.saved-badge{font-size:11px;font-weight:800;padding:7px 10px;border-radius:999px;background:rgba(52,199,89,.14);color:#239447}.ogp-card{--card-bg:#f3f5f7;--window:#fff;--ink:#111827;--sub:#657080;--line:rgba(0,0,0,.11);position:relative;width:100%;aspect-ratio:1200/630;border-radius:22px;overflow:hidden;margin-top:20px;background:linear-gradient(135deg,#6f98ff,#b792ff);box-shadow:0 28px 70px rgba(15,23,42,.22);font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}.ogp-card.dark{--window:#15191f;--ink:#f7f8fa;--sub:#aab4c0;--line:rgba(255,255,255,.1)}.ogp-card.mincho{font-family:"Yu Mincho","Hiragino Mincho ProN",serif}.background-layer,.overlay-layer{position:absolute;inset:0}.background-layer{background-position:center;background-size:cover;filter:saturate(1.06)}.overlay-layer{background:linear-gradient(135deg,rgba(20,31,55,.18),rgba(57,26,84,.3));backdrop-filter:blur(1px)}.window-frame{position:absolute;inset:3.4% 2.4%;border-radius:20px;overflow:hidden;background:color-mix(in srgb,var(--window) calc(var(--window-opacity, .92) * 100%),transparent);box-shadow:0 30px 80px rgba(0,0,0,.36);border:1px solid rgba(255,255,255,.18)}.titlebar{height:13%;display:flex;align-items:center;position:relative;border-bottom:1px solid var(--line);color:var(--ink)}.finder-titlebar{justify-content:center;background:color-mix(in srgb,color-mix(in srgb,var(--window) 92%,#d7dee8) calc(var(--window-opacity, .92) * 100%),transparent)}.traffic-lights{position:absolute;left:2.3%;display:flex;gap:8px}.traffic-lights i{width:12px;height:12px;border-radius:50%;background:#ff5f57}.traffic-lights i:nth-child(2){background:#febc2e}.traffic-lights i:nth-child(3){background:#28c840}.finder-title{font-size:clamp(10px,1.1vw,17px);font-weight:700}.toolbar-icons{position:absolute;right:2.5%;color:var(--sub)}.windows-titlebar{display:none;justify-content:space-between;padding-left:2.5%;background:color-mix(in srgb,var(--window) calc(var(--window-opacity, .92) * 100%),transparent)}.win-app,.win-controls{display:flex;align-items:center;height:100%;gap:10px;font-family:Segoe UI,sans-serif;font-size:clamp(9px,1vw,15px)}.win-logo{color:#1687f8}.win-controls{gap:0}.win-controls span{display:grid;place-items:center;width:46px;height:100%}.win-controls span:last-child{background:#e81123;color:#fff}.windows .finder-titlebar{display:none}.windows .windows-titlebar{display:flex}.windows .window-frame{border-radius:8px}.window-body{height:87%;padding:5.5% 6.2%;display:flex;flex-direction:column;color:var(--ink)}.meta-row{display:flex;align-items:center;justify-content:space-between;gap:20px}.category-chip{padding:.55em .9em;border-radius:999px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:#3777ef;font-size:clamp(8px,1.1vw,15px);font-weight:900;letter-spacing:.13em}.windows .category-chip{border-radius:3px;background:#1687f8;color:#fff}.url-text{font-size:clamp(8px,1.05vw,15px);color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.window-body h3{margin:4.5% 0 0;max-width:92%;font-size:clamp(22px,3.4vw,54px);line-height:1.27;letter-spacing:-.035em}.author-row{margin-top:auto;display:flex;align-items:center;gap:14px}.avatar{width:clamp(38px,5.1vw,76px);height:clamp(38px,5.1vw,76px);border-radius:20%;background:linear-gradient(145deg,#2f6fed,#8f62ff);display:grid;place-items:center;overflow:hidden;color:#fff;font-size:clamp(17px,2vw,30px);font-weight:900;box-shadow:0 8px 22px rgba(47,111,237,.3)}.windows .avatar{border-radius:50%}.avatar img{width:100%;height:100%;object-fit:cover}.author-row strong,.author-row small{display:block}.author-row strong{font-size:clamp(10px,1.3vw,19px)}.author-row small{margin-top:3px;font-size:clamp(8px,1vw,14px);color:var(--sub)}
@media(max-width:980px){.app-shell{grid-template-columns:1fr}.controls{position:static}.preview-panel{order:-1}}@media(max-width:560px){.app-shell{width:min(100% - 18px,1500px);margin:10px auto;gap:12px}.panel{border-radius:18px}.controls,.preview-panel{padding:16px}.form-grid{grid-template-columns:1fr}.wide{grid-column:auto}.actions{flex-direction:column}.actions button{width:100%}}

/* PNG書き出し（Canvas）の1200×630レイアウトに合わせたプレビュー */
.ogp-card{
  container-type:inline-size;
  border-radius:0;
  background:var(--preview-bg,#6f98ff);
}
.background-layer{filter:none}
.overlay-layer{background:rgba(25,26,55,.26);backdrop-filter:none}
.window-frame{
  inset:2cqw;
  border:0;
  border-radius:1.833333cqw;
  background:rgb(255 255 255 / var(--window-opacity,.92));
  box-shadow:0 2cqw 4.5cqw rgba(0,0,0,.36);
}
.ogp-card.dark .window-frame{background:rgb(21 25 31 / var(--window-opacity,.92))}
.windows .window-frame{border-radius:.833333cqw}
.titlebar{height:5.666667cqw;border-bottom:.083333cqw solid var(--line)}
.finder-titlebar{background:rgb(241 243 246 / var(--window-opacity,.92))}
.dark .finder-titlebar{background:rgb(25 30 37 / var(--window-opacity,.92))}
.windows-titlebar{padding-left:2.166667cqw;background:rgb(255 255 255 / var(--window-opacity,.92))}
.dark .windows-titlebar{background:rgb(25 30 37 / var(--window-opacity,.92))}
.traffic-lights{left:1.916667cqw;gap:.916667cqw}
.traffic-lights i{width:1.166667cqw;height:1.166667cqw}
.finder-title{font-size:1.416667cqw;font-weight:700}
.toolbar-icons{right:2.5cqw;font-size:1.416667cqw}
.win-app{gap:.833333cqw;font-size:1.5cqw}
.win-logo{font-size:2.083333cqw}
.win-controls{font-size:2cqw}
.win-controls span{width:3.833333cqw}
.window-body{position:absolute;inset:0;padding:0;height:auto}
.meta-row{position:absolute;left:5.666667cqw;right:5.666667cqw;top:10.25cqw;height:3cqw}
.category-chip{
  display:flex;align-items:center;height:3cqw;padding:0 1.416667cqw;
  border-radius:1.5cqw;font-size:1.333333cqw;letter-spacing:0;font-weight:900
}
.windows .category-chip{border-radius:.333333cqw}
.url-text{font-size:1.416667cqw;line-height:3cqw}
.window-body h3{
  position:absolute;left:5.666667cqw;right:5.666667cqw;top:14.45cqw;
  margin:0;max-width:none;font-size:4.333333cqw;line-height:5.666667cqw;
  letter-spacing:0;font-weight:700
}
.window-body h3 span{display:block;white-space:nowrap}
.author-row{position:absolute;left:5.666667cqw;top:39.166667cqw;margin:0;gap:1.666667cqw}
.avatar{
  width:6cqw;height:6cqw;border-radius:1.25cqw;
  font-size:2.583333cqw;box-shadow:none
}
.windows .avatar{border-radius:50%}
.author-row strong{font-size:1.583333cqw;line-height:2.5cqw}
.author-row small{margin-top:0;font-size:1.333333cqw;line-height:2.166667cqw}