html, body { margin:0; background:#fff; color-scheme:light; }
button, a, input, textarea, select { -webkit-tap-highlight-color:transparent; }
button, a { cursor:pointer; }
button:disabled { cursor:default; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline:2px solid #444; outline-offset:4px; }
#portfolio-plan { color-scheme: light; --paper:#fff; --ink:#252525; --sub:#666; --line:#e5e5e5; --wash:#f5f5f3; color:var(--ink); font:14px/1.65 -apple-system,BlinkMacSystemFont,"Helvetica Neue","Noto Sans JP",sans-serif; background:transparent; width:100%; }
#portfolio-plan * { box-sizing:border-box; }
#portfolio-plan [hidden] { display:none !important; }
#portfolio-plan button, #portfolio-plan input, #portfolio-plan textarea { font:inherit; }
#portfolio-plan button { color:inherit; }
#portfolio-plan .site { background:var(--paper); border:1px solid var(--line); position:relative; min-height:620px; }
#portfolio-plan .page-body { position:relative; isolation:isolate; z-index:0; }
#portfolio-plan .page-stage { position:relative; }
#portfolio-plan .page-veil { position:absolute; inset:0; z-index:20; background:var(--paper); opacity:0; pointer-events:none; }
#portfolio-plan .brand-intro { position:absolute; inset:0; z-index:30; display:grid; place-items:center; background:var(--paper); }
#portfolio-plan .brand-intro img { display:block; width:148px; max-width:32%; height:auto; opacity:0; }
#portfolio-plan .site-header { position:relative; z-index:1; background:var(--paper); padding:30px 32px 16px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
#portfolio-plan .brand { display:flex; align-items:center; gap:16px; border:0; background:none; padding:0; font-weight:500; letter-spacing:.12em; text-align:left; }
#portfolio-plan .brand img { display:block; width:50px; height:auto; }
#portfolio-plan .brand small { display:block; color:var(--sub); font-size:11px; font-weight:400; letter-spacing:.06em; }
#portfolio-plan nav { display:flex; flex-wrap:wrap; gap:8px 19px; }
#portfolio-plan nav button { border:0; background:none; padding:8px 0; font-size:12px; text-decoration:none; }
#portfolio-plan nav button[aria-current="page"] { text-decoration:underline; text-underline-offset:6px; }
#portfolio-plan .view { padding:24px 32px 32px; }
#portfolio-plan .eyebrow { color:var(--sub); font-size:11px; letter-spacing:.12em; margin:0 0 5px; }
#portfolio-plan h2 { font-size:27px; font-weight:500; letter-spacing:.02em; margin:0 0 6px; }
#portfolio-plan p { margin:0 0 16px; }
#portfolio-plan .intro { margin-bottom:25px; }
#portfolio-plan .hint { color:var(--sub); font-size:12px; }
#portfolio-plan .shelf-viewport { --display-size:180px; --display-scale:1; height:380px; overflow:hidden; position:relative; cursor:grab; touch-action:none; user-select:none; background:var(--paper); }
#portfolio-plan .shelf-viewport.is-zooming { pointer-events:none; cursor:default; }
#portfolio-plan .shelf-scene { width:100%; height:100%; position:relative; transform-origin:0 0; }
#portfolio-plan .shelf-viewport.panning, #portfolio-plan .shelf-viewport.panning * { cursor:grabbing; }
#portfolio-plan .shelves { display:grid; gap:calc(38px * var(--display-scale)); position:relative; padding:calc(36px * var(--display-scale)) calc(28px * var(--display-scale)); width:max-content; will-change:transform; }
#portfolio-plan .shelf-row { display:grid; grid-template-columns:repeat(var(--shelf-columns),var(--display-size)); gap:calc(50px * var(--display-scale)); justify-content:start; align-items:end; padding-bottom:calc(18px * var(--display-scale)); border-bottom:1px solid var(--line); }
#portfolio-plan .book { border:0; padding:0; position:relative; display:block; background:none; width:100%; min-width:0; text-align:left; align-self:end; cursor:inherit; user-select:none; z-index:1; transform-origin:center bottom; transition:transform 180ms ease-out; }
#portfolio-plan .book:focus-visible { transform:scale(1.05); z-index:2; }
#portfolio-plan .shelf-viewport.panning .book, #portfolio-plan .shelf-viewport.is-zooming .book { transform:none; transition:none; }
@media (hover:hover) and (pointer:fine) {
#portfolio-plan .shelf-viewport:not(.panning):not(.is-zooming) .book:hover { transform:scale(1.05); z-index:2; }
}
#portfolio-plan .cover { background:var(--wash); min-height:126px; display:flex; flex-direction:column; justify-content:space-between; padding:12px; border-radius:5px 5px 3px 3px; box-shadow:3px 4px 9px #0000000b; position:relative; overflow:hidden; }
#portfolio-plan .book .cover { min-height:var(--display-size); padding:calc(12px * var(--display-scale)); }
#portfolio-plan .book:nth-child(3n) .cover { min-height:calc(205px * var(--display-scale)); }
#portfolio-plan .book:nth-child(4n) .cover { min-height:calc(165px * var(--display-scale)); }
#portfolio-plan .cover .monogram { font-size:29px; font-weight:500; letter-spacing:-.04em; color:#767671; }
#portfolio-plan .cover .kind { font-size:10px; letter-spacing:.09em; color:var(--sub); }
#portfolio-plan .cover .cover-title { display:block; font-size:11px; padding-top:24px; position:relative; }
#portfolio-plan .cover::before { content:""; width:60%; height:43%; position:absolute; right:-15%; top:12%; border:1px solid #c9c9c3; border-radius:50%; transform:rotate(-30deg); }
#portfolio-plan .book:nth-child(2n) .cover { background:#ededeb; }
#portfolio-plan .book:nth-child(3n) .cover::before { border-radius:0; transform:rotate(25deg); }
#portfolio-plan .new { position:absolute; top:-9px; left:8px; padding:2px 7px; background:var(--ink); color:var(--paper); font-size:10px; letter-spacing:.08em; z-index:2; }
#portfolio-plan .action { display:inline-flex; align-items:center; justify-content:center; min-height:40px; border:1px solid #bcbcbc; padding:8px 16px; background:var(--paper); border-radius:2px; }
#portfolio-plan .action.primary { background:var(--ink); color:var(--paper); border-color:var(--ink); }
#portfolio-plan .more { display:flex; justify-content:center; margin-top:26px; }
#portfolio-plan .grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px 18px; }
#portfolio-plan .work { display:grid; grid-template-rows:minmax(0,9fr) minmax(0,7fr); aspect-ratio:1/1; align-items:stretch; border:0; background:none; padding:0; text-align:left; min-width:0; }
#portfolio-plan .work .cover { min-height:0; height:100%; aspect-ratio:16/9; box-shadow:none; border-radius:0; }
#portfolio-plan .work.movie > .cover { grid-row:1 / -1; }
#portfolio-plan .work-caption { display:flex; flex-direction:column; justify-content:center; gap:4px; min-width:0; min-height:0; padding:8px 12px; border-top:1px solid var(--line); background:var(--paper); }
#portfolio-plan .book.movie .cover, #portfolio-plan .work.movie .cover { display:grid; grid-template-rows:9fr 7fr; aspect-ratio:1/1; min-height:0; padding:0; }
#portfolio-plan .movie .cover::before { content:none; }
#portfolio-plan .movie-image { display:grid; place-items:center; aspect-ratio:16/9; min-height:0; overflow:hidden; background:#e5e5e1; }
#portfolio-plan .movie-image .monogram { font-size:23px; line-height:1.1; }
#portfolio-plan .movie-band { display:flex; flex-direction:column; justify-content:center; gap:4px; min-height:0; padding:8px 12px; border-top:1px solid var(--line); background:var(--paper); color:var(--ink); }
#portfolio-plan .movie-band .cover-title { display:block; padding-top:0; position:static; }
#portfolio-plan .book .cover .monogram { font-size:clamp(20px,calc(29px * var(--display-scale)),72px); }
#portfolio-plan .book .cover .kind { font-size:clamp(10px,calc(10px * var(--display-scale)),18px); }
#portfolio-plan .book .cover .cover-title { font-size:clamp(11px,calc(11px * var(--display-scale)),22px); padding-top:calc(24px * var(--display-scale)); }
#portfolio-plan .book .movie-image .monogram { font-size:clamp(20px,calc(23px * var(--display-scale)),64px); }
#portfolio-plan .book .movie-band { gap:calc(4px * var(--display-scale)); padding:calc(8px * var(--display-scale)) calc(12px * var(--display-scale)); }
#portfolio-plan .book .movie-band .cover-title { padding-top:0; }
#portfolio-plan .book .new { top:calc(-9px * var(--display-scale)); left:calc(8px * var(--display-scale)); padding:calc(2px * var(--display-scale)) calc(7px * var(--display-scale)); font-size:clamp(10px,calc(10px * var(--display-scale)),18px); }
#portfolio-plan .work.movie > .work-title, #portfolio-plan .work.movie > .work-type { display:none; }
#portfolio-plan .work-title, #portfolio-plan .work .movie-band .cover-title { display:block; font-size:12px; }
#portfolio-plan .work-type, #portfolio-plan .work .movie-band .kind { display:block; margin:0; color:var(--sub); font-size:11px; }
#portfolio-plan .page-copy { max-width:640px; margin:0 auto; padding:25px 0 50px; }
#portfolio-plan .profile-row { display:grid; grid-template-columns:150px 1fr; align-items:start; gap:30px; margin:28px 0; }
#portfolio-plan .profile-row .photo { background:var(--wash); min-height:170px; display:grid; place-items:center; color:var(--sub); font-size:12px; }
#portfolio-plan h3 { font-size:16px; font-weight:500; margin:0 0 15px; }
#portfolio-plan .placeholder { background:var(--wash); height:8px; margin:14px 0; width:100%; }
#portfolio-plan .placeholder.short { width:68%; }
#portfolio-plan .form { display:grid; gap:16px; margin-top:25px; }
#portfolio-plan label { display:grid; gap:5px; font-size:12px; }
#portfolio-plan input, #portfolio-plan textarea { border:1px solid #c9c9c9; border-radius:0; padding:10px; width:100%; background:var(--paper); color:var(--ink); min-height:44px; }
#portfolio-plan textarea { resize:vertical; min-height:110px; }
#portfolio-plan .site-footer { padding:18px 32px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; border-top:1px solid var(--line); font-size:11px; color:var(--sub); }
#portfolio-plan .footer-brand { display:flex; align-items:center; gap:12px; }
#portfolio-plan .footer-brand img { display:block; width:28px; height:auto; }
#portfolio-plan .text-link { background:none; border:0; padding:0; text-decoration:underline; text-underline-offset:3px; font-size:inherit; }
#portfolio-plan .overlay { position:absolute; inset:0; background:#24242466; padding:0 22px; z-index:8; }
#portfolio-plan .dialog { position:relative; top:16px; margin:0 auto; width:100%; max-width:700px; padding:24px; overflow-y:auto; overscroll-behavior:contain; background:var(--paper); box-shadow:0 12px 35px #0000001a; }
#portfolio-plan .dialog-head { display:flex; justify-content:space-between; gap:16px; align-items:start; margin-bottom:18px; }
#portfolio-plan .dialog h2 { font-size:22px; }
#portfolio-plan .close { background:none; border:1px solid var(--line); padding:7px 10px; white-space:nowrap; font-size:12px; min-height:40px; }
#portfolio-plan .media { background:var(--wash); aspect-ratio:16/9; display:grid; place-items:center; color:var(--sub); text-align:center; padding:20px; }
#portfolio-plan .media strong { font-size:24px; font-weight:400; display:block; }
#portfolio-plan .gallery { min-width:0; }
#portfolio-plan .gallery-window { aspect-ratio:16/9; overflow:hidden; background:var(--wash); touch-action:pan-y; user-select:none; }
#portfolio-plan .gallery-track { display:flex; height:100%; transition:transform 320ms ease; }
#portfolio-plan .gallery-slide { flex:0 0 100%; min-width:0; height:100%; margin:0; }
#portfolio-plan .gallery-slide img { display:block; width:100%; height:100%; object-fit:contain; }
#portfolio-plan .gallery-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; height:100%; padding:20px; color:var(--sub); text-align:center; }
#portfolio-plan .gallery-placeholder strong { font-size:24px; font-weight:400; }
#portfolio-plan .gallery-placeholder span { font-size:12px; }
#portfolio-plan .gallery-controls { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; }
#portfolio-plan .gallery-controls button { padding:7px 10px; min-height:40px; font-size:12px; }
#portfolio-plan .gallery-count { font-size:12px; white-space:nowrap; font-variant-numeric:tabular-nums; }
#portfolio-plan .metadata { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:20px 0; font-size:12px; }
#portfolio-plan .metadata span { display:block; color:var(--sub); font-size:11px; }
#portfolio-plan .dialog-bottom { display:flex; justify-content:space-between; gap:12px; margin-top:18px; }
#portfolio-plan .admin-list { display:grid; gap:0; margin:24px 0; }
#portfolio-plan .admin-row { padding:12px 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; border-bottom:1px solid var(--line); }
#portfolio-plan .admin-row small { font-size:11px; color:var(--sub); }
#portfolio-plan .admin-choice { display:flex; gap:20px; flex-wrap:wrap; }
#portfolio-plan .admin-choice label { display:flex; align-items:center; gap:6px; }
#portfolio-plan .admin-choice input { width:auto; min-height:0; }
#portfolio-plan .admin-actions { display:flex; flex-wrap:wrap; gap:12px; }
#portfolio-plan .notice { font-size:12px; padding:12px 0; color:var(--sub); }
#portfolio-plan button:hover { opacity:.8; }
#portfolio-plan .book:hover { opacity:1; }
#portfolio-plan button:disabled { opacity:.5; }
@media (max-width:650px) {
#portfolio-plan .site-header { padding:24px 18px 10px; }
#portfolio-plan .brand { gap:12px; }
#portfolio-plan .brand img { width:42px; }
#portfolio-plan .brand small { max-width:150px; }
#portfolio-plan .view { padding:22px 18px; }
#portfolio-plan nav { gap:15px; }
#portfolio-plan .shelf-viewport { height:400px; }
#portfolio-plan .cover { padding:10px; min-height:120px; }
#portfolio-plan .cover .monogram { font-size:25px; }
#portfolio-plan .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 14px; }
#portfolio-plan .profile-row { grid-template-columns:1fr; }
#portfolio-plan .profile-row .photo { width:150px; }
#portfolio-plan .site-footer { padding:18px; }
#portfolio-plan .overlay { padding:0 12px; }
#portfolio-plan .dialog { padding:18px; }
#portfolio-plan .metadata { grid-template-columns:1fr; gap:8px; }
#portfolio-plan .metadata span { display:inline; margin-right:10px; }
#portfolio-plan .action, #portfolio-plan .close, #portfolio-plan nav button { min-height:44px; }
#portfolio-plan input, #portfolio-plan textarea { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) { #portfolio-plan * { scroll-behavior:auto; } #portfolio-plan .book, #portfolio-plan .gallery-track { transition:none; } }
html[data-site] {
color-scheme: light;
background: #fff;
}
html[data-site] > body {
min-height: 100dvh;
background: #fff !important;
}
html[data-site] #portfolio-plan {
display: flex;
flex-direction: column;
min-height: 100dvh;
background: var(--paper);
}
html[data-site] #portfolio-plan .site {
display: flex;
flex: 1 0 auto;
flex-direction: column;
min-height: 0;
border: 0;
}
html[data-site] #portfolio-plan .page-body,
html[data-site] #portfolio-plan .page-stage,
html[data-site] #portfolio-plan .behind {
display: flex;
flex: 1 0 auto;
flex-direction: column;
}
html[data-site] #portfolio-plan .view {
flex: 1 0 auto;
}
html[data-site] #portfolio-plan[data-page="home"] .view {
display: flex;
flex-direction: column;
}
html[data-site] #portfolio-plan[data-page="home"] .shelf-viewport {
flex: 1 0 80px;
height: auto;
min-height: 80px;
}
html[data-site] #portfolio-plan .site-header,
html[data-site] #portfolio-plan .site-footer,
html[data-site] #portfolio-plan .intro,
html[data-site] #portfolio-plan .more {
flex: none;
}
#portfolio-plan .home-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:240px; padding:50px 0; text-align:center; }
#portfolio-plan .home-empty > p:last-child { font-size:14px; letter-spacing:.08em; color:var(--sub); }
#portfolio-plan .profile-row.without-photo { grid-template-columns:1fr; }
#portfolio-plan select { font:inherit; border:1px solid #c9c9c9; border-radius:0; padding:10px; min-height:44px; width:100%; color:var(--ink); background:var(--paper); }
#portfolio-plan .multiline { white-space:pre-line; overflow-wrap:anywhere; }
#portfolio-plan .work-title, #portfolio-plan .cover-title { overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
#portfolio-plan .profile-photo { display:block; width:150px; height:170px; object-fit:cover; }
#portfolio-plan .youtube-player { display:block; width:100%; aspect-ratio:16/9; border:0; }
#portfolio-plan .contact-copy { padding-top:clamp(35px,8vh,100px); }
#portfolio-plan .contact-copy h2 { margin-bottom:32px; }
#portfolio-plan .contact-mail { display:inline-flex; align-items:center; gap:24px; margin-top:20px; padding-bottom:8px; font-size:clamp(16px,3vw,25px); color:var(--ink); text-decoration:none; border-bottom:1px solid var(--ink); overflow-wrap:anywhere; }
#portfolio-plan .contact-mail span { font-size:20px; }
#portfolio-plan .login-copy { max-width:420px; padding-top:55px; }
#portfolio-plan .admin-copy { max-width:980px; }
#portfolio-plan .admin-section-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
#portfolio-plan .admin-section-head h2, #portfolio-plan .admin-section-head h3 { margin:0; }
#portfolio-plan .admin-tabs { display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:28px; border-bottom:1px solid var(--line); }
#portfolio-plan .admin-tab { padding:12px 0; border:0; border-bottom:2px solid transparent; background:none; font-size:13px; }
#portfolio-plan .admin-tab[aria-selected="true"] { border-bottom-color:var(--ink); }
#portfolio-plan [data-admin-notice] { min-height:42px; margin:0 0 10px; }
#portfolio-plan .notice.error { color:#a82d2d; }
#portfolio-plan .editor-form { padding:24px; border:1px solid var(--line); background:#fafaf9; }
#portfolio-plan .field-pair { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
#portfolio-plan .admin-work-name { flex:1 1 180px; min-width:0; overflow-wrap:anywhere; }
#portfolio-plan .admin-work-name strong { display:block; font-weight:500; }
#portfolio-plan .admin-work-name small { display:block; margin-top:4px; font-size:11px; color:var(--sub); }
#portfolio-plan .row-actions { display:flex; flex-wrap:wrap; gap:8px; }
#portfolio-plan .row-actions .action { font-size:12px; padding:7px 12px; }
#portfolio-plan .status-badge { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:2px; background:#f0f0ee; }
#portfolio-plan .status-badge.published { background:#edf2ed; color:#3e6046; }
#portfolio-plan .action.danger { color:#9a3131; border-color:#d9bcbc; }
#portfolio-plan .action.danger-primary { background:#9a3131; border-color:#9a3131; color:#fff; }
#portfolio-plan .confirm-dialog { max-width:500px; padding:30px; }
#portfolio-plan .delete-work-title { margin-top:24px; overflow-wrap:anywhere; }
#portfolio-plan .count-field { max-width:200px; }
#portfolio-plan .list-heading { margin:10px 0 0; }
#portfolio-plan .home-order { list-style:none; padding:0; margin:0; }
#portfolio-plan .home-order li { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
#portfolio-plan .home-add { display:flex; align-items:end; gap:12px; }
#portfolio-plan .home-add label { flex:1; }
#portfolio-plan .profile-edit-photo { display:block; width:150px; height:170px; object-fit:cover; }
@media (max-width:650px) {
#portfolio-plan select { font-size:16px; }
#portfolio-plan .admin-tabs { gap:4px 18px; }
#portfolio-plan .admin-tab { font-size:12px; }
#portfolio-plan .editor-form { padding:16px; }
#portfolio-plan .field-pair { grid-template-columns:1fr; }
#portfolio-plan .confirm-dialog { padding:22px; }
#portfolio-plan .contact-mail { gap:12px; }
}
#portfolio-plan .cover.display-card,
#portfolio-plan .book .cover.display-card { display:grid; grid-template-rows:minmax(0,9fr) minmax(0,7fr); aspect-ratio:1; min-height:0; padding:0; background:var(--paper); }
#portfolio-plan .cover.display-card::before,
#portfolio-plan .book .cover.display-card::before { content:none; }
#portfolio-plan .cover.display-card.image-only { display:block; height:100%; aspect-ratio:16/9; }
#portfolio-plan .display-image { display:block; position:relative; overflow:hidden; aspect-ratio:16/9; min-height:0; background:var(--wash); }
#portfolio-plan .image-only .display-image { width:100%; height:100%; }
#portfolio-plan .display-image .display-artwork,
#portfolio-plan .frame-window .display-artwork { position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; object-fit:var(--image-fit,contain); transform:translate(var(--image-x,0%),var(--image-y,0%)) scale(var(--image-scale,1)); transform-origin:center; pointer-events:none; }
#portfolio-plan .display-placeholder { display:block; position:absolute; inset:0; background:linear-gradient(135deg,#f4f4f1,#e9e9e5); }
#portfolio-plan .display-band { display:flex; flex-direction:column; justify-content:center; gap:4px; min-width:0; min-height:0; padding:8px 12px; border-top:1px solid var(--line); background:var(--paper); }
#portfolio-plan .display-band .cover-title,
#portfolio-plan .book .display-band .cover-title { padding-top:0; position:static; }
#portfolio-plan .book .display-band { gap:calc(4px * var(--display-scale)); padding:calc(8px * var(--display-scale)) calc(12px * var(--display-scale)); }
#portfolio-plan .photo-display { display:flex; justify-content:center; align-items:flex-end; width:100%; aspect-ratio:1; }
#portfolio-plan .photo-frame { display:block; position:relative; flex:none; width:calc(100% * var(--photo-size,1)); aspect-ratio:663/485; isolation:isolate; filter:drop-shadow(2px 4px 5px #0002); }
#portfolio-plan .frame-window { position:absolute; left:8%; top:11%; width:84%; height:78%; overflow:hidden; background:var(--wash); }
#portfolio-plan .frame-art { display:block; position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
#portfolio-plan .photo-frame.portrait { width:calc(100% * 485 / 663 * var(--photo-size,1)); aspect-ratio:485/663; }
#portfolio-plan .portrait .frame-window { left:11%; top:8%; width:78%; height:84%; }
#portfolio-plan .portrait .frame-art { inset:auto; left:50%; top:50%; width:calc(100% * 663 / 485); height:calc(100% * 485 / 663); max-width:none; transform:translate(-50%,-50%) rotate(90deg); }
#portfolio-plan .display-settings { min-width:0; margin:4px 0; padding:20px; border:1px solid var(--line); background:var(--paper); }
#portfolio-plan .display-settings legend { padding:0 8px; font-size:13px; }
#portfolio-plan .display-editor-grid { display:grid; grid-template-columns:minmax(180px,300px) minmax(0,1fr); gap:24px; align-items:start; }
#portfolio-plan .display-preview-stage { display:grid; place-items:center; min-height:360px; padding:24px; border:1px solid var(--line); background:#f7f7f5; touch-action:none; user-select:none; cursor:grab; }
#portfolio-plan .display-preview-stage.is-positioning { cursor:grabbing; }
#portfolio-plan .display-preview-card { display:block; width:100%; max-width:240px; }
#portfolio-plan .display-preview-card .cover-title { font-size:12px; }
#portfolio-plan .display-preview-hint { margin:12px 0 0; }
#portfolio-plan .display-controls { display:grid; gap:16px; }
#portfolio-plan .range-label { display:flex; justify-content:space-between; gap:12px; }
#portfolio-plan .range-label output { color:var(--sub); font-variant-numeric:tabular-nums; }
#portfolio-plan .display-controls input[type="range"] { min-height:30px; padding:0; border:0; accent-color:var(--ink); cursor:ew-resize; }
#portfolio-plan .display-standalone { margin:24px 0; }
#portfolio-plan .automatic-work { border:1px solid var(--line); padding:12px; margin-top:18px; }
@media (max-width:700px) {
#portfolio-plan .display-editor-grid { grid-template-columns:minmax(0,1fr); gap:20px; }
#portfolio-plan .display-settings { padding:14px; }
#portfolio-plan .display-preview-stage { min-height:320px; }
#portfolio-plan .display-preview-card { max-width:210px; }
}
#portfolio-plan .book .cover.home-graphic,
#portfolio-plan .display-preview-card .cover.home-graphic { display:block; width:min(100%,calc(var(--display-size,240px) * var(--art-ratio,1))); min-height:0; height:auto; aspect-ratio:auto; margin-inline:auto; }
#portfolio-plan .home-graphic .display-image { width:100%; height:auto; aspect-ratio:var(--art-ratio,1); }
#portfolio-plan .home-graphic .display-band { height:calc(var(--display-size,240px) * 7 / 16); }
#portfolio-plan .home-preview .cover .kind { font-size:clamp(10px,calc(10px * var(--display-scale)),18px); }
#portfolio-plan .home-preview .cover .cover-title { font-size:clamp(11px,calc(11px * var(--display-scale)),22px); padding-top:0; }
#portfolio-plan .home-preview .display-band { gap:calc(4px * var(--display-scale)); padding:calc(8px * var(--display-scale)) calc(12px * var(--display-scale)); }
#portfolio-plan .work { border:1px solid var(--line); border-radius:2px; overflow:hidden; background:var(--paper); }
#portfolio-plan .work.movie > .cover { grid-row:auto; }
#portfolio-plan .work .cover.display-card.image-only { aspect-ratio:16/9; height:100%; padding:0; }
#portfolio-plan .work-caption { width:100%; align-self:stretch; text-align:left; }
#portfolio-plan .work-caption .work-type { font-size:11px; line-height:1.65; color:var(--sub); }
#portfolio-plan .work-caption .work-title { font-size:12px; line-height:1.65; }
#portfolio-plan .work-preview { pointer-events:none; }
#portfolio-plan .work-filters, #portfolio-plan .display-targets { display:flex; flex-wrap:wrap; gap:8px; }
#portfolio-plan .work-filters { margin:0 0 28px; }
#portfolio-plan .work-filters button, #portfolio-plan .display-targets button { display:inline-flex; align-items:center; gap:10px; min-height:40px; padding:8px 16px; border:1px solid var(--line); background:var(--paper); font-size:12px; }
#portfolio-plan .work-filters button[aria-pressed="true"], #portfolio-plan .display-targets button[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:var(--paper); }
#portfolio-plan .work-filters button span { font-size:10px; opacity:.65; font-variant-numeric:tabular-nums; }
#portfolio-plan .display-targets { margin:0 0 20px; }
#portfolio-plan .publish-settings { display:grid; gap:16px; min-width:0; margin:0; padding:20px; border:1px solid var(--line); }
#portfolio-plan .publish-settings legend { padding:0 8px; font-size:13px; }
#portfolio-plan .empty-works { padding:20px 0; }
@media (max-width:650px) {
#portfolio-plan .work-filters button, #portfolio-plan .display-targets button { min-height:44px; padding:8px 12px; }
#portfolio-plan .work-caption { padding:6px 10px; gap:3px; }
#portfolio-plan .work-caption .work-type { font-size:11px; line-height:1.4; }
#portfolio-plan .work-caption .work-title { font-size:12px; line-height:1.4; }
}
@media (max-width:380px) {
#portfolio-plan .work-caption { padding:4px 8px; gap:2px; }
#portfolio-plan .work-caption .work-type { font-size:10px; line-height:1.3; }
#portfolio-plan .work-caption .work-title { font-size:11px; line-height:1.3; }
}