:root { color-scheme: light; --bg:#fff5f7; --panel:#fffafb; --ink:#593d51; --muted:#806576; --line:#edcfdc; --accent:#bd4d7f; --soft:#f7e2eb; --focus:#7b3b67; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Yu Gothic",Meiryo,sans-serif; color:var(--ink); background:var(--bg); }
* { box-sizing:border-box; }
body { margin:0; font-size:15px; line-height:1.8; overflow-wrap:anywhere; }
a { color:inherit; text-underline-offset:.25em; }
button,input,select,textarea { font:inherit; }
button,.file-button { cursor:pointer; color:var(--ink); background:transparent; border:1px solid #d8a6bd; border-radius:4px; padding:8px 13px; font-size:13px; line-height:1.8; min-height:40px; }
button:hover,.file-button:hover { background:#fae5ee; border-color:#b95a84; }
button:disabled { opacity:.55; cursor:wait; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.primary:hover { background:#a53a6b; }
button.plain { border:0; padding:4px 8px; min-width:44px; min-height:44px; font-size:23px; line-height:1; }
:focus-visible { outline:2px solid var(--focus); outline-offset:4px; }
[hidden] { display:none !important; }
.skip { position:fixed; left:20px; top:-100px; z-index:200; background:var(--ink); color:var(--bg); padding:8px 12px; }
.skip:focus { top:10px; }
.app-shell { min-height:100vh; }
.sidebar { width:216px; position:fixed; inset:0 auto 0 0; border-right:0; padding:28px 18px 20px; display:flex; flex-direction:column; z-index:20; background:#fae5ee; overflow:auto; }
.wordmark { font-family:ui-monospace,Consolas,monospace; font-size:25px; line-height:1.3; letter-spacing:-.05em; text-decoration:none; font-weight:700; white-space:nowrap; }
.wordmark span { color:var(--accent); font-size:24px; }
.sidebar-sub { font-size:11px; color:var(--muted); margin:9px 0 27px; }
nav { display:flex; flex-direction:column; gap:5px; }
nav a { padding:10px 12px; text-decoration:none; border-radius:3px; font-size:13px; min-height:42px; }
nav a:hover { background:var(--panel); }
nav a[aria-current="page"] { color:#fff; background:var(--accent); }
.nav-index { display:inline-block; width:23px; font-size:10px; opacity:.7; }
.sidebar-foot { margin-top:auto; padding:38px 10px 3px; font-size:10px; color:#806576; }
.sidebar-foot p { margin:4px 0 10px; }
.tiny-star { font-size:26px; color:var(--accent); }
.workspace { margin-left:216px; }
.topbar { position:sticky; top:0; min-height:70px; display:flex; align-items:center; justify-content:space-between; padding:12px 30px; gap:15px; border-bottom:1px solid var(--line); background:var(--bg); z-index:25; }
.topbar p { margin:0; color:var(--muted); font-size:12px; }
.review-actions { display:flex; align-items:center; gap:9px; flex-shrink:0; }
#comment-count { color:var(--accent); margin-left:5px; font-variant-numeric:tabular-nums; }
.sample-notice { display:flex; align-items:baseline; gap:14px; padding:10px 32px; color:var(--muted); font-size:11px; border-bottom:1px solid var(--line); }
.sample-notice span { color:var(--accent); white-space:nowrap; }
.sample-notice p { margin:0; }
main { padding:30px 32px 38px; max-width:1312px; margin:auto; min-height:70vh; }
main:focus { outline:none; }
.page-heading { display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:24px; }
h1 { font-family:inherit; font-weight:700; letter-spacing:.03em; font-size:28px; line-height:1.5; margin:0 0 8px; }
h2 { font-weight:500; font-size:20px; margin:0 0 15px; line-height:1.6; }
h3 { font-size:15px; font-weight:500; margin:0; }
p { margin:0 0 15px; }
.muted,.helper { color:var(--muted); }
.helper { font-size:12px; margin:10px 0 16px; }
.page-heading p { color:var(--muted); font-size:13px; margin:0; }
.room { position:relative; margin:20px 0 12px; }
.room { max-width:860px; }
.room img { display:block; width:100%; aspect-ratio:1000/550; border-radius:5px; }
.room-hotspot { position:absolute; left:11%; top:49%; width:27%; height:41%; border-radius:5px; text-decoration:none; display:flex; align-items:end; justify-content:center; padding:10px; color:#fff1f7; }
.room-hotspot span { background:#fff8fb; font-size:11px; padding:3px 10px; border-radius:3px; }
.room-hotspot:hover { outline:2px solid var(--accent); }
.room-caption { color:var(--muted); font-size:11px; margin:0 0 27px; }
.section-heading { display:flex; justify-content:space-between; align-items:baseline; gap:15px; margin:30px 0 16px; }
.section-heading h2 { margin:0; font-size:18px; }
.section-heading a { font-size:12px; color:var(--accent); }
.catalog-tools { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:22px; }
.search-wrap { flex:1; min-width:150px; }
.search-wrap input { width:100%; }
input:not([type="checkbox"]):not([type="range"]):not([type="file"]),select,textarea { background:#fffbfc; color:var(--ink); border:1px solid #c38da8; padding:9px 11px; border-radius:4px; min-width:0; }
input[type="search"] { font-size:14px; }
input::placeholder,textarea::placeholder { color:#876778; }
label { font-size:13px; }
.check-line { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); min-height:40px; }
input[type="checkbox"],input[type="range"] { accent-color:var(--accent); }
input[type="checkbox"] { width:17px; height:17px; }
.filter-row { display:flex; gap:17px; flex-wrap:wrap; margin:0 0 22px; }
.filter-row button { min-height:32px; font-size:12px; border:0; border-bottom:1px solid transparent; border-radius:0; padding:2px 0; color:var(--muted); }
.filter-row button[aria-pressed="true"] { color:var(--accent); border-bottom-color:var(--accent); }
.asset-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.asset { margin:0; min-width:0; display:grid; grid-template-columns:230px minmax(0,1fr); gap:26px; align-items:center; padding:14px; background:var(--panel); border:1px solid var(--line); border-radius:14px; }
.checker { background-color:#fffafa; background-image:linear-gradient(45deg,#f6eaf0 25%,transparent 25%),linear-gradient(-45deg,#f6eaf0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f6eaf0 75%),linear-gradient(-45deg,transparent 75%,#f6eaf0 75%); background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0; }
.asset-preview { position:relative; display:block; width:100%; padding:0; border:0; border-radius:4px; aspect-ratio:4/3; overflow:hidden; }
.asset-preview:hover { background-color:#fbe8ef; }
.asset-preview img { display:block; width:100%; height:100%; object-fit:contain; transition:transform .16s ease; }
.asset-preview:hover img { transform:scale(1.025); }
.asset-bottom { display:flex; gap:18px; align-items:center; justify-content:space-between; margin-top:0; }
.asset-bottom h3 { font-size:17px; font-weight:700; }
.asset-bottom p { color:var(--muted); font-size:13px; margin:3px 0 0; }
.asset-bottom button { padding:8px 14px; min-height:44px; font-size:12px; white-space:nowrap; background:var(--accent); border-color:var(--accent); color:#fff; }
.asset-note { position:absolute; inset:auto 9px 9px; background:#fff8fb; color:#f3e5ee; border:1px solid #ad7d96; padding:7px 10px; font-size:11px; text-align:left; }
.empty { padding:30px 0; color:var(--muted); }
.two-column { display:grid; grid-template-columns:minmax(200px,.8fr) minmax(250px,1.2fr); gap:32px; align-items:start; }
.controls { display:grid; gap:17px; }
.field { display:grid; gap:7px; }
.field input,.field textarea,.field select { width:100%; }
.preview-board { padding:20px; background:var(--panel); border:1px solid var(--line); border-radius:5px; }
.profile-card { padding:28px; aspect-ratio:4/3; background:#e4d5df; color:#322535; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; }
.profile-card .card-moon { width:110px; position:absolute; right:-8px; top:10px; opacity:.75; }
.profile-card { min-height:250px; }
.card-name { position:relative; font-family:Georgia,"Yu Mincho",serif; font-size:clamp(22px,3vw,38px); line-height:1.5; margin:8px 0; white-space:pre-wrap; }
.card-bio { position:relative; font-size:13px; line-height:1.8; white-space:pre-wrap; }
.card-caption { color:#775a72; font-size:10px; letter-spacing:.12em; }
.photo-preview { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:3px; background:#302635; }
.file-button { display:inline-flex; align-items:center; justify-content:center; min-height:42px; width:fit-content; }
.file-button input { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.file-button:focus-within { outline:2px solid var(--focus); outline-offset:4px; }
.preview-board .helper { margin-bottom:0; }
.gallery-gate { padding:30px; background:var(--panel); border:1px solid var(--line); margin-top:28px; }
summary { cursor:pointer; padding:5px 0; }
.gate-art { display:block; max-height:280px; margin:20px auto; }
.note-row { padding:22px 0; border-top:1px solid var(--line); max-width:700px; }
.note-row time { font-size:11px; color:var(--muted); }
.note-row p { margin:8px 0 0; }
.dialogue-stage { position:relative; margin-bottom:24px; }
.dialogue-stage img { width:100%; display:block; border-radius:4px; }
.speech { position:absolute; bottom:6%; left:5%; right:5%; background:#fff8fbed; border:1px solid #a18099; padding:15px 20px; font-size:16px; color:#f5e7ef; white-space:pre-wrap; max-height:55%; overflow:auto; }
.prose { max-width:730px; }
.prose h2 { font-size:19px; margin-top:30px; }
.prose p { color:var(--muted); font-size:14px; }
footer { border-top:1px solid var(--line); margin:0 32px; padding:22px 0; display:flex; gap:20px; align-items:baseline; color:var(--muted); font-size:11px; }
footer span { font-family:Georgia,serif; font-size:18px; }
footer p { margin:0; }
dialog { color:var(--ink); background:#fffafb; border:1px solid #d2a3bb; border-radius:7px; padding:23px; width:min(500px,calc(100vw - 28px)); max-height:calc(100dvh - 28px); overflow:auto; }
dialog::backdrop { background:#0c0914b3; }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:16px; }
.dialog-heading h2 { margin:0; font-size:18px; }
.dialog-heading button { flex-shrink:0; }
#comment-form label { display:block; margin-bottom:7px; }
#comment-text { width:100%; resize:vertical; max-height:40dvh; font-size:16px; }
.dialog-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }
.side-dialog { position:fixed; inset:0 0 0 auto; margin:0; width:min(410px,100vw); height:100dvh; max-height:none; border-radius:0; padding:23px; }
.nav-dialog { position:fixed; inset:0 auto 0 0; margin:0; width:min(280px,90vw); height:100dvh; max-height:none; border-radius:0; }
.comment-tools { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }
.comment-tools button,.comment-tools .file-button { font-size:12px; padding:6px 9px; }
.comment-entry { padding:18px 0; border-top:1px solid var(--line); }
.comment-entry h3 { color:var(--accent); font-size:13px; margin-bottom:6px; }
.comment-entry p { white-space:pre-wrap; margin:6px 0 11px; font-size:14px; }
.comment-entry small { color:var(--muted); font-size:10px; }
.comment-entry .entry-actions { display:flex; flex-wrap:wrap; gap:7px; }
.comment-entry button { padding:4px 8px; min-height:34px; font-size:11px; }
.error { color:#9d2854; font-size:13px; }
.comment-mode { position:fixed; z-index:70; bottom:18px; left:calc(216px + (100% - 216px)/2); transform:translateX(-50%); width:max-content; max-width:calc(100vw - 250px); display:flex; gap:18px; align-items:center; padding:12px 16px; border:1px solid var(--accent); background:#fffafb; box-shadow:0 7px 28px #593d5120; border-radius:5px; font-size:12px; }
body.is-commenting [data-anchor] { cursor:crosshair; }
body.is-commenting [data-anchor]:hover { outline:1px dashed #d8a9c3; outline-offset:3px; }
body.is-commenting [data-anchor]:focus-visible { outline:2px solid var(--focus); }
#pins { position:fixed; inset:0; z-index:60; pointer-events:none; }
.pin { position:absolute; width:30px; height:30px; min-height:30px; padding:0; border-radius:50% 50% 50% 2px; transform:translate(-3px,-27px); color:#241629; background:#efb4cf; border:2px solid #fff0f7; font-size:12px; font-weight:700; line-height:26px; pointer-events:auto; box-shadow:0 2px 10px #0005; }
.pin:hover { background:#ffcede; }
.toast { position:fixed; bottom:20px; right:22px; z-index:100; color:#fff5fa; background:#593d51; border:1px solid #806576; padding:11px 17px; max-width:min(430px,calc(100vw - 32px)); font-size:13px; border-radius:4px; }
.sample-detail-preview { width:100%; border-radius:4px; }
.sample-detail-preview.dark { background:#28232e; background-image:none; }
.detail-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:15px; }
.mobile-only { display:none; }
@media (max-width:1000px) { .sidebar { width:195px; padding-left:14px; padding-right:14px; }.workspace { margin-left:195px; }main { padding:26px 24px; }.topbar { padding:12px 24px; }.sample-notice { padding-left:24px; padding-right:24px; }.asset-grid { gap:22px 16px; }.two-column { gap:22px; grid-template-columns:1fr 1fr; }.comment-mode { left:calc(195px + (100% - 195px)/2); max-width:calc(100vw - 230px); } }
@media (max-width:760px) { .sidebar { display:none; }.workspace { margin-left:0; }.mobile-only { display:inline-flex; align-items:center; justify-content:center; }.topbar { padding:10px 16px; gap:9px; min-height:66px; }.topbar p { display:none; }.review-actions { margin-left:auto; gap:7px; }.review-actions button { font-size:11px; padding:8px 10px; min-height:42px; }.sample-notice { display:block; padding:10px 20px; font-size:10px; }.sample-notice p { margin-top:3px; }main { padding:24px 20px 30px; }h1 { font-size:23px; }.page-heading { margin-bottom:20px; }.page-heading p { font-size:12px; }.asset-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 14px; }.asset-bottom { display:block; }.asset-bottom h3 { font-size:12px; }.asset-bottom button { margin-top:7px; min-height:36px; }.room { margin-top:15px; }.room-caption { font-size:10px; }.room-hotspot { padding:4px; }.room-hotspot span { font-size:8px; padding:2px 5px; }.two-column { grid-template-columns:1fr; gap:25px; }.controls { gap:13px; }.preview-board { padding:15px; }.card-name { font-size:28px; }.dialogue-stage img { min-height:280px; object-fit:cover; }.speech { padding:10px 14px; font-size:13px; }.comment-mode { left:14px; right:14px; bottom:14px; transform:none; width:auto; max-width:none; font-size:11px; gap:10px; }.comment-mode button { flex-shrink:0; }.toast { right:14px; bottom:14px; }footer { margin:0 20px; display:block; }footer p { margin-top:5px; }.filter-row { gap:15px; }.catalog-tools { gap:6px 12px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; scroll-behavior:auto !important; } }
:root { --paper:#fffafb; }
.sidebar { padding-top:32px; }
.wordmark { color:#954668; }
.wordmark span { font-family:inherit; }
.topbar { background:#fff5f7f5; }
.sidebar-foot { line-height:1.8; }
.sidebar-foot p { color:var(--ink); }
.home-hero { display:grid; grid-template-columns:minmax(230px,.8fr) minmax(0,1.3fr); align-items:center; overflow:hidden; background:#f9e0eb; border-radius:18px; }
.hero-copy { padding:30px 12px 30px 30px; }
.hero-copy h1 { font-size:clamp(25px,2.6vw,38px); line-height:1.55; white-space:pre-line; color:#924369; }
.hero-copy p { font-size:13px; white-space:pre-line; }
.hero-copy .eyebrow { color:#9a5476; font-size:11px; letter-spacing:.06em; margin-bottom:14px; }
.primary-link { display:inline-block; text-decoration:none; color:#fff; background:var(--accent); padding:9px 24px; border-radius:8px; font-size:13px; margin-top:6px; }
.primary-link:hover { background:#a53a6b; }
.home-hero .room { margin:0; max-width:none; align-self:stretch; min-height:280px; }
.home-hero .room img { width:100%; height:100%; object-fit:cover; aspect-ratio:auto; border-radius:0; }
.room-hotspot { left:47%; top:28%; width:43%; height:59%; color:var(--ink); }
.room-hotspot span { color:var(--ink); background:#fffaf8ed; border:1px solid #dfb9cb; }
.home-shortcuts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin:22px 0 36px; }
.home-shortcuts a { position:relative; display:grid; gap:3px; text-decoration:none; padding:8px 24px 14px 0; border-bottom:1px solid var(--line); }
.home-shortcuts strong { font-size:14px; font-weight:600; }
.home-shortcuts span { font-size:11px; color:var(--muted); }
.home-shortcuts b { position:absolute; right:0; top:8px; color:var(--accent); font-weight:400; }
.asset-preview img { padding:12px; image-rendering:pixelated; }
.asset-type { display:block; color:var(--accent); font-size:10px; margin-bottom:5px; }
.asset-bottom small { display:block; font-size:10px; color:var(--muted); margin-top:9px; }
.filter-row { gap:25px; }
.filter-row button[aria-pressed="true"] { font-weight:700; border-bottom-width:2px; }
.update-row { display:grid; grid-template-columns:105px minmax(0,1fr); gap:20px; padding:22px 0; border-bottom:1px solid var(--line); }
.update-row time { font-size:11px; color:var(--muted); padding-top:4px; font-variant-numeric:tabular-nums; }
.update-row h2,.update-row h3 { font-size:15px; margin:0; font-weight:600; }
.update-row ul { margin:10px 0 0; padding-left:1.2em; font-size:13px; color:var(--muted); }
.update-row li + li { margin-top:5px; }
.feedback-login input { width:100%; margin-top:8px; }
.feedback-login .error { margin-top:12px; }
@media (max-width:1000px) {
  .home-hero { grid-template-columns:minmax(205px,.85fr) minmax(0,1fr); }
  .hero-copy { padding:24px 12px 24px 24px; }
  .asset { grid-template-columns:185px minmax(0,1fr); gap:18px; }
  .asset-bottom { flex-wrap:wrap; gap:10px; }
  .asset-bottom h3 { font-size:15px; }
}
@media (max-width:700px) {
  .home-hero { grid-template-columns:1fr; }
  .hero-copy { padding:24px; }
  .hero-copy h1 { font-size:29px; }
  .home-hero .room { min-height:0; aspect-ratio:2/1; }
  .home-hero .room img { object-fit:cover; }
  .home-shortcuts { grid-template-columns:1fr; gap:3px; margin:12px 0 24px; }
  .home-shortcuts a { padding:12px 26px 12px 3px; }
  .home-shortcuts b { top:15px; }
  .asset-grid { grid-template-columns:minmax(0,1fr) !important; gap:12px; }
  .asset { grid-template-columns:115px minmax(0,1fr); gap:13px; padding:10px; border-radius:10px; }
  .asset-preview { aspect-ratio:1/1; }
  .asset-preview img { padding:5px; }
  .asset-bottom { display:block; }
  .asset-bottom h3 { font-size:14px; }
  .asset-bottom p { font-size:11px; line-height:1.7; margin-top:4px; }
  .asset-type { margin-bottom:3px; }
  .asset-bottom small { font-size:9px; margin:6px 0; }
  .asset-bottom button { font-size:11px; min-height:40px; padding:4px 11px; margin-top:3px; }
  .update-row { grid-template-columns:1fr; gap:4px; padding:18px 0; }
}
@media (max-width:359px) {
  .asset { grid-template-columns:88px minmax(0,1fr); gap:10px; padding:8px; }
  .asset-bottom h3 { font-size:13px; }
  .hero-copy { padding:20px; }
  .hero-copy h1 { font-size:26px; }
}