/* A public sketchbook: paper, vermilion ink, and real works on the wall. */
body:not([data-page="admin"]):not(.admin-page) {
  --bg: #f7f6f2; --surface: #fff; --surface2: #eeede7; --border: #dcdad2;
  --text: #24241f; --text2: #66665e; --text3: #6d6d63;
  --primary: #cd391b; --primary-fg: #fff; --danger: #bd351f; --radius: 4px;
  --font-serif: 'Inter', 'Noto Sans SC', 'Noto Sans JP', sans-serif;
  font-size: 16px;
}
body:not(.admin-page) .topbar { background: #f7f6f2f0; height: calc(76px + env(safe-area-inset-top,0px)); }
body:not(.admin-page) .topbar-inner { max-width: 1240px; padding: 0 32px; gap: 52px; }
body:not(.admin-page) .logo { font-family: var(--font-sans); font-weight: 600; font-size: 28px; letter-spacing: -1.8px; }
body:not(.admin-page) .logo span { color: var(--text); font-weight: 400; }
body:not(.admin-page) .logo::after { content: '.'; color: var(--primary); }
body:not(.admin-page) .nav-link { border-radius: 0; padding: 9px 3px; margin-right: 24px; font-size: 14px; }
body:not(.admin-page) .nav-link.active { background: none; box-shadow: 0 2px var(--primary); }
body:not(.admin-page) .main { max-width: 1240px; padding: 0 32px 40px; }
body:not(.admin-page) .btn { border-radius: 3px; gap: 30px; padding: 15px 23px; font-family: inherit; font-size: 16px; }
body:not(.admin-page) .btn-primary:hover { background: #ca391b; border-color: #ca391b; }
button,a,input,select { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #235ada; outline-offset: 5px; }
.text-link { font-size: 14px; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.text-link:hover { color: var(--primary); }
.play-hero { display:grid; grid-template-columns: 1.04fr 1fr; gap: 30px; padding: 40px 0 38px; align-items:center; }
.eyebrow { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .12em; font-weight: 500; }
.live-dot { width: 7px; height: 7px; background: var(--primary); border-radius: 50%; }
.hero-copy h1 { font-size: clamp(40px,4.8vw,60px); font-weight: 600; letter-spacing: -.065em; line-height: 1.22; margin: 20px 0 22px; }
.ink-accent { color: #e74725; position: relative; display: inline-block; }
.ink-accent::after { content:''; position:absolute; left:0; right:0; bottom:-6px; height:7px; border-top:3px solid currentColor; border-radius:50%; transform:rotate(-2deg); opacity:.65; }
.hero-intro { color:var(--text2); max-width: 380px; line-height:1.9; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:20px; margin-top:24px; }
.hero-footnote { font-size:12px; color:var(--text3); margin-top:18px; letter-spacing:.05em; }
.art-wall { position:relative; min-height:350px; width:100%; max-width:430px; margin:0 auto; }
.wall-card { display:block; background:white; border:1px solid #e4e1d7; padding:12px 12px 16px; position:absolute; box-shadow: 3px 8px 20px #30251112; width:54%; text-decoration:none; transition:transform .2s; }
.wall-card::before { content:''; position:absolute; width:74px; height:24px; background:#e6cf9266; top:-12px; left:calc(50% - 37px); transform:rotate(-3deg); }
.wall-card img { width:100%; height:auto; aspect-ratio:1; object-fit:contain; display:block; background:#fff; }
.wall-card .wall-signature { display:flex; justify-content:space-between; gap:10px; margin-top:9px; font-size:12px; color:var(--text2); }
.wall-card .wall-signature span:first-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wall-card:nth-of-type(1) { left:2%; top:24px; transform:rotate(-9deg); z-index:1; }
.wall-card:nth-of-type(2) { right:1%; top:50px; transform:rotate(8deg); z-index:2; }
.wall-card:nth-of-type(3) { width:39%; left:25%; top:145px; transform:rotate(-3deg); z-index:3; }
.wall-card:hover { transform:rotate(0) translateY(-8px); z-index:4; }
.wall-caption { position:absolute; top:0; right:4%; font-size:12px; color:var(--text2); transform:rotate(6deg); }
.wall-invitation { height:360px; display:flex; flex-direction:column; justify-content:center; padding-left:18%; transform:rotate(-7deg); }
.wall-invitation > span { font-size:100px; font-weight:600; letter-spacing:-9px; line-height:.85; }
.orange-dot { color:var(--primary); }
.wall-invitation p { margin-top:25px; font-size:14px; }
.daily-strip { display:grid; grid-template-columns:150px 1fr auto; gap:28px; align-items:center; background:#f0eddf; border:1px solid #d9d5c5; padding:28px 30px; position:relative; }
.daily-strip::before { content:''; position:absolute; left:-1px; top:-1px; bottom:-1px; width:5px; background:var(--primary); }
.daily-index { display:flex; flex-direction:column; gap:8px; font-size:14px; font-weight:600; }
.daily-index span:last-child { font-size:12px; font-weight:400; letter-spacing:.12em; color:var(--text2); }
.daily-copy h2 { font-size:23px; font-weight:500; letter-spacing:-.03em; }
.daily-copy p { font-size:14px; color:var(--text2); margin-top:8px; }
body:not(.admin-page) .daily-button { background:var(--text); color:white; border-color:var(--text); }
body:not(.admin-page) .daily-button:hover { background:var(--primary); border-color:var(--primary); }
.community-section { padding:40px 0 0; }
.community-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; }
.community-heading h2 { font-size:30px; font-weight:500; letter-spacing:-.04em; margin-top:10px; }
.community-heading .eyebrow { color:var(--text3); font-size:11px; }
.wall-controls { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:25px 0; border-bottom:1px solid var(--border); padding-bottom:16px; }
.filter-btn { border:1px solid transparent; background:transparent; color:var(--text2); font:inherit; font-size:14px; padding:8px 15px; cursor:pointer; border-radius:3px; }
.filter-btn.active { color:#fff; background:var(--text); }
.filter-btn:hover:not(.active) { background:var(--surface2); }
.wall-count { margin-left:auto; font-size:12px; color:var(--text3); }
.sketch-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:25px 20px; }
.sketch-grid .gallery-card { background:white; border:1px solid #e5e3db; padding:10px 10px 14px; transition:transform .2s,box-shadow .2s; }
.sketch-grid .gallery-card:hover { transform:translateY(-5px) rotate(-1deg); box-shadow:0 6px 15px #3025110d; }
.sketch-grid .art-thumb { border:0; border-radius:0; background:#fff; }
.sketch-grid .art-thumb img { object-fit:contain; }
.sketch-grid .art-meta { padding:0 3px; }
.sketch-grid .art-meta .name { font-size:14px; }
.card-byline { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.card-byline .name { min-width:0; }
.card-byline time { flex-shrink:0; font-size:11px; color:var(--text3); }
.sketch-grid .art-meta .desc { font-size:12px; min-height:18px; }
.sketch-grid .empty-state,.sketch-grid > .loading { grid-column:1/-1; padding:55px 15px; border:1px dashed var(--border); }
.closing-note { display:flex; align-items:center; justify-content:center; gap:25px; border-top:1px solid var(--border); padding:35px 0 10px; }
.closing-note > span { font-size:38px; color:var(--primary); }
.closing-note p { font-size:18px; }
body:not(.admin-page) .tpf { --tpf-bg:var(--bg); border-top:1px solid var(--border); }
body:not(.admin-page) .draw-tools { background:#eeede7; }
body:not(.admin-page) .canvas-box { border-radius:0; box-shadow:0 4px 18px #30251112; }
body:not(.admin-page) .brush-btn { font-size:14px; }
body:not(.admin-page) .brush-btn.active { border-color:var(--primary); background:#fff; color:var(--primary); }
body:not(.admin-page) .size-slider { accent-color:var(--primary); }
body:not(.admin-page) .color-swatch.active { outline:2px solid var(--text); outline-offset:1px; }
body:not(.admin-page) .bottom-btn-primary { background:var(--primary); color:#fff; }
body:not(.admin-page) .bottom-btn-primary:hover:not(:disabled) { background:#ca391b; }
.draw-prompt { padding:14px 24px; display:flex; justify-content:space-between; align-items:center; gap:15px; background:#eeede7; border-bottom:1px solid var(--border); font-size:14px; flex-shrink:0; }
.draw-prompt p { margin-top:3px; color:var(--text2); font-size:12px; }
.draw-prompt a { flex-shrink:0; }
.work-page { padding-top:42px !important; }
.work-layout { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr); gap:60px; align-items:center; margin:30px 0 60px; }
.work-paper { background:white; border:1px solid var(--border); padding:18px; box-shadow:5px 9px 24px #3025110d; transform:rotate(-1deg); }
.work-paper img { width:100%; height:auto; display:block; aspect-ratio:1; object-fit:contain; }
.work-copy h1 { font-size:38px; line-height:1.3; letter-spacing:-.04em; margin:16px 0; overflow-wrap:anywhere; }
.work-copy .work-description { color:var(--text2); line-height:1.8; overflow-wrap:anywhere; }
.work-meta { font-size:13px; color:var(--text3); margin:18px 0; }
.work-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.work-actions .btn { gap:10px !important; padding:12px 16px !important; font-size:14px !important; }
.work-invite { margin-top:32px; border-top:1px solid var(--border); padding-top:23px; }
.work-invite p { font-size:14px; margin-bottom:12px; }
.success-note { border-left:3px solid var(--primary); background:#eeede7; padding:16px 20px; margin-top:20px; }
.action-status { font-size:14px; color:var(--text2); margin-top:14px; }
.share-link { width:100%; padding:10px; margin-top:12px; font:inherit; font-size:14px; border:1px solid var(--border); background:white; }
[hidden] { display:none !important; }
@media(min-width:769px) { body[data-page="draw"] .draw-page { min-height:calc(100dvh - 76px); } }
@media(max-width:900px) { .play-hero { gap:20px; } .art-wall { min-height:330px; } .wall-card:nth-of-type(3) { top:160px; } .daily-strip { grid-template-columns:110px 1fr auto; gap:20px; padding:24px; } .daily-copy h2 { font-size:20px; } .sketch-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:768px) {
 body:not(.admin-page) .topbar { height:calc(64px + env(safe-area-inset-top,0px)); }
 body:not(.admin-page) .topbar-inner { padding:0 18px; gap:24px; }
 body:not(.admin-page) .logo { font-size:24px; }
 body:not(.admin-page) .nav-link { margin-right:10px; padding:8px 0; font-size:13px; }
 body:not(.admin-page) .lang-btn { padding:6px 4px; font-size:12px; }
 body:not(.admin-page) .main { padding:0 20px 30px; }
 .play-hero { grid-template-columns:1fr; padding:35px 0 30px; gap:22px; }
 .hero-copy h1 { font-size:54px; margin:18px 0 22px; }
 .hero-intro { max-width:100%; font-size:15px; }
 .hero-actions { margin-top:23px; }
 .art-wall { min-height:320px; max-width:430px; width:100%; margin:10px auto 0; }
 .wall-card { width:49%; } .wall-card:nth-of-type(1) { left:4%; } .wall-card:nth-of-type(2) { right:3%; top:35px; } .wall-card:nth-of-type(3) { top:125px; left:31%; width:37%; }
 .wall-caption { top:-10px; }
 .wall-invitation { height:260px; }
 .daily-strip { grid-template-columns:1fr auto; gap:15px; padding:22px; }
 .daily-index { grid-column:1/-1; flex-direction:row; justify-content:space-between; }
 .daily-copy { grid-column:1/-1; }
 .daily-copy h2 { font-size:23px; } .daily-copy p { line-height:1.7; }
 .daily-button { grid-column:1/-1; justify-content:space-between !important; }
 .community-section { padding-top:38px; }
 .community-heading { align-items:flex-start; flex-direction:column; gap:15px; }
 .community-heading h2 { font-size:25px; }
 .wall-controls { margin:20px 0; gap:2px; } .filter-btn { font-size:13px; padding:8px 10px; }
 .wall-count { width:100%; margin-top:8px; }
 .sketch-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px 12px; }
 .sketch-grid .gallery-card { padding:7px 7px 11px; }
 .card-byline { gap:4px; } .card-byline time { font-size:10px; }
 .closing-note { flex-wrap:wrap; gap:12px; padding-top:20px; } .closing-note p { font-size:15px; } .closing-note .text-link { margin-left:38px; }
 body[data-page="draw"] .topbar-inner { gap:12px; }
 body[data-page="draw"] .draw-page { min-height:0; }
 body[data-page="draw"] .draw-bottom-bar { background:#f7f6f2f5; box-shadow:0 -2px 12px #30251108; }
 .draw-prompt { padding:8px 12px; font-size:13px; } .draw-prompt p { display:none; }
 .work-layout { grid-template-columns:1fr; gap:28px; margin-bottom:35px; } .work-paper { padding:10px; } .work-copy h1 { font-size:30px; }
}
@media(max-width:370px) { body:not(.admin-page) .topbar-inner { padding:0 10px; gap:12px; } body:not(.admin-page) .nav-link { margin-right:7px; } .hero-copy h1 { font-size:46px; } .art-wall { min-height:280px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
.my-hint { font-size:14px; color:var(--text2); margin:0 0 24px; }
.load-more-wrap { display:flex; justify-content:center; margin:0 0 30px; }
.work-topic { font-size:14px; color:var(--primary); line-height:1.7; }
html[lang="en"] .hero-copy h1 { font-size:clamp(38px,4.5vw,56px); letter-spacing:-.055em; }
html[lang="ja"] .hero-copy h1 { font-size:clamp(32px,4vw,50px); letter-spacing:-.055em; }
@media(max-width:768px) { html[lang="en"] .hero-copy h1 { font-size:48px; } html[lang="ja"] .hero-copy h1 { font-size:40px; } }
@media(max-width:768px) {
 body:not(.admin-page) .topbar-inner { gap:12px; padding:0 14px; }
 body:not(.admin-page) .topbar-nav { gap:10px; }
 body:not(.admin-page) .nav-link { margin:0; }
 body:not(.admin-page) .lang-sep { padding:0; }
}
@media(max-width:370px) { body:not(.admin-page) .topbar-nav a[href="/"] { display:none; } }

/* Keep the invitation compact; illustration cards never set the page height. */
body:not(.admin-page) .hero-actions .btn { padding:14px 20px; gap:18px; font-size:15px; }
.hero-actions .text-link { font-size:13px; }
#daily { scroll-margin-top:90px; }
@media(max-width:768px) {
 .play-hero { padding:24px 0; gap:24px; }
 .hero-copy h1 { font-size:44px; margin:16px 0 20px; }
 html[lang="en"] .hero-copy h1 { font-size:42px; }
 html[lang="ja"] .hero-copy h1 { font-size:34px; }
 .hero-actions { gap:16px; margin-top:20px; }
 .art-wall { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; min-height:0; max-width:430px; margin:0 auto; padding:10px 4px; }
 .wall-card:nth-of-type(n) { position:relative; width:auto; left:auto; right:auto; top:auto; padding:6px 6px 10px; }
 .wall-card:nth-of-type(1) { transform:rotate(-5deg); }
 .wall-card:nth-of-type(2) { transform:rotate(4deg); }
 .wall-card:nth-of-type(3) { transform:rotate(-3deg); }
 .wall-card::before { width:40px; height:14px; left:calc(50% - 20px); top:-7px; }
 .wall-card .wall-signature { font-size:11px; gap:3px; margin-top:6px; }
 .wall-caption { display:none; }
 .wall-invitation { grid-column:1/-1; height:160px; padding-left:20%; }
 .wall-invitation > span { font-size:60px; letter-spacing:-5px; }
 .wall-invitation p { margin-top:14px; }
}
@media(min-width:769px) {
 body[data-page="draw"] { height:100dvh; overflow:hidden; }
 body[data-page="draw"] .draw-page { min-height:0; }
 body[data-page="draw"] .draw-scroll { display:flex; min-height:0; overflow:hidden; }
 body[data-page="draw"] .draw-column .draw-main { flex:1; min-height:0; padding:16px; gap:12px; overflow:hidden; }
 body[data-page="draw"] .canvas-box { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; border:0; box-shadow:none; background:transparent; }
 body[data-page="draw"] #drawCanvas { flex-shrink:0; border:1px solid var(--border); box-shadow:0 3px 14px #30251112; }
 body[data-page="draw"] .draw-form-compact { flex-shrink:0; display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:12px; }
 body[data-page="draw"] .draw-form-compact .field { margin:0; min-width:0; }
 body[data-page="draw"] .draw-bottom-bar { padding:0 16px 16px; }
}
@media(min-width:769px) {
 body[data-page="draw"] .topbar { height:calc(64px + env(safe-area-inset-top,0px)); }
 body[data-page="draw"] .draw-prompt { padding:10px 20px; }
 body[data-page="draw"] .draw-tools { padding:16px; }
 body[data-page="draw"] .draw-tools-title { margin-bottom:12px; }
 body[data-page="draw"] .tool-block { margin-bottom:16px; }
 body[data-page="draw"] .brush-btn { padding:8px; }
 body[data-page="draw"] .tpf__inner { padding:8px 24px; }
 body[data-page="draw"] .draw-form-compact { padding:10px; }
}