:root{--paper:#f6f5ef;--white:#fff;--ink:#243c37;--muted:#697670;--green:#2b6c62;--green-dark:#20564e;--mint:#e6eee4;--line:#dce1d8;--radius:22px;--serif:Georgia,'Times New Roman',serif;font-family:system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}a{color:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #dd995a;outline-offset:4px}button{color:inherit}img,canvas{display:block;max-width:100%}[hidden]{display:none!important}
.site-header{max-width:1232px;margin:auto;padding:22px 24px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;font-size:16px;font-weight:700;line-height:1.2}.brand-mark{background:var(--green);color:white;border-radius:15px;width:46px;height:46px;display:grid;place-items:center;font-size:27px}.brand-sub{display:block;font-weight:400;color:var(--muted);font-size:11px;letter-spacing:.07em;margin-top:4px}.header-link{text-decoration:none;font-size:13px;display:flex;gap:9px;align-items:center}.header-link span{font-size:20px}main{max-width:1184px;margin:auto;padding:0 24px;min-height:70vh}.hero{padding:42px 0 28px;display:grid;grid-template-columns:1fr auto;gap:22px;align-items:end}.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);font-weight:700;margin:0 0 12px}.hero h1,.detail-title{font-family:var(--serif);font-size:clamp(32px,5vw,53px);line-height:1.08;font-weight:400;margin:0;letter-spacing:-.035em}.hero p.intro{max-width:560px;line-height:1.6;margin:16px 0 0;font-size:15px;color:var(--muted)}.count-pill{background:var(--mint);border:1px solid #d5dfd1;white-space:nowrap;border-radius:999px;padding:10px 15px;font-size:12px}.gallery-toolbar{display:flex;justify-content:space-between;gap:20px;align-items:center;padding-bottom:19px;font-size:12px;color:var(--muted)}.selection-summary{color:var(--green);font-weight:600;max-width:60%}.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.card{border:1px solid var(--line);background:#fff;border-radius:var(--radius);overflow:hidden;position:relative;transition:transform .18s,border-color .18s}.card:hover{transform:translateY(-3px);border-color:#a5b8a8}.card.selected{border:2px solid var(--green)}.card-link{display:block;text-decoration:none;height:100%}.card-visual{height:214px;background:#f4f4ee;position:relative;overflow:hidden}.card-visual img{width:100%;height:100%;object-fit:contain}.card-number{position:absolute;top:12px;left:13px;border:1px solid #e3e5db;background:#fffffff0;backdrop-filter:blur(6px);padding:5px 8px;border-radius:8px;font-size:10px;letter-spacing:.05em;font-weight:600}.chosen-badge{position:absolute;right:12px;top:12px;background:var(--green);color:#fff;padding:5px 8px;border-radius:8px;font-size:10px}.card-body{padding:18px 19px 19px;min-height:120px}.card-title{font-size:17px;font-weight:650;line-height:1.35;margin:0 24px 7px 0;letter-spacing:-.02em}.card-frame{font-size:12px;color:var(--muted);line-height:1.5;margin:0 22px 0 0}.card-arrow{position:absolute;right:18px;bottom:24px;font-size:24px;color:var(--green)}.pending .card-visual{display:grid;place-items:center;background:repeating-linear-gradient(145deg,#f1f2eb,#f1f2eb 16px,#eef0e8 16px,#eef0e8 17px)}.pending-art{color:#a5b8ac;text-align:center}.pending-art .cloud{display:block;font-size:70px;line-height:1.1}.pending-art .pending-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase}.pending .card-title{color:#687970}.pending .card-arrow{color:#9cac9c}.gallery-hint{padding:28px 0 0;margin:0;color:var(--muted);font-size:12px;line-height:1.6}.back-link{display:inline-flex;align-items:center;gap:7px;font-size:12px;text-decoration:none;color:var(--muted);margin:25px 0 22px}.detail-top{display:flex;justify-content:space-between;align-items:flex-start;gap:22px;margin-bottom:22px}.detail-title{font-size:clamp(28px,3.2vw,40px);max-width:700px}.frame-description{font-size:13px;color:var(--muted);line-height:1.5;margin:11px 0 0}.choose-button,.primary-button{background:var(--green);color:white;border:1px solid var(--green);border-radius:12px;min-height:46px;padding:11px 18px;font-size:13px;font-weight:600;white-space:nowrap}.choose-button:hover,.primary-button:hover{background:var(--green-dark)}.choose-button.is-selected{background:var(--mint);color:var(--green)}.detail-layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(280px,1fr);gap:22px;align-items:start}.scene-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.scene-stage{background:#f3f2ec;position:relative;min-height:160px}.scene-canvas{width:100%;height:auto;aspect-ratio:1.62;object-fit:contain}.scene-caption{padding:13px 17px;display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--muted);border-top:1px solid var(--line)}.scene-caption strong{font-weight:600;color:var(--green)}.controls{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px}.controls h2{font-size:15px;letter-spacing:-.01em;margin:0 0 6px}.controls-intro{font-size:12px;color:var(--muted);margin:0 0 17px;line-height:1.5}.emotion-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.emotion-button{background:#f5f6f0;border:1px solid #e5e9df;border-radius:11px;min-height:55px;padding:10px 2px;font-size:10px;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center}.emotion-button .emoji{font-size:18px;line-height:1}.emotion-button[aria-pressed=true]{border-color:var(--green);background:var(--mint);color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}.image-controls{border-top:1px solid var(--line);padding-top:19px;margin-top:20px}.image-controls h3{font-size:13px;margin:0 0 11px}.upload-button{width:100%;border:1px solid var(--green);background:#fff;color:var(--green);border-radius:11px;min-height:45px;font-size:12px;font-weight:600}.reset-button{background:transparent;border:0;display:block;margin:10px auto 0;padding:7px 10px;font-size:11px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}.privacy-note{font-size:10px;line-height:1.5;color:var(--muted);text-align:center;margin:11px 0 0}.image-status{font-size:11px;color:var(--green);line-height:1.5;overflow-wrap:anywhere;margin:10px 0 0;text-align:center}.detail-lower{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;margin-top:30px;align-items:start}.section-label{font-size:15px;margin:0 0 14px;letter-spacing:-.01em}.sheet-button{display:block;width:100%;padding:14px;border:1px solid var(--line);background:#fff;border-radius:var(--radius)}.sheet-button img{width:100%;height:auto}.sheet-tip{display:block;font-size:11px;color:var(--muted);margin-top:12px}.notes{background:var(--mint);border-radius:var(--radius);padding:23px}.notes p{font-size:12px;color:#56685d;line-height:1.7;margin:0;overflow-wrap:anywhere}.share-button{margin-top:19px;border:1px solid #b8c7b4;border-radius:10px;background:transparent;min-height:42px;padding:10px 14px;font-size:12px}.prototype-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}.nav-prototype{border:1px solid var(--line);border-radius:14px;padding:15px 18px;text-decoration:none;font-size:12px;line-height:1.5}.nav-prototype span{display:block;color:var(--muted);font-size:10px;margin-bottom:4px}.nav-prototype.next{text-align:right}.pending-detail{text-align:center;padding:60px 24px;background:var(--mint);border-radius:var(--radius)}.pending-detail .cloud{font-size:95px;color:#91ad9c}.pending-detail h2{font-family:var(--serif);font-size:31px;font-weight:400;margin:15px 0}.pending-detail p{font-size:13px;color:var(--muted);line-height:1.65;max-width:400px;margin:auto}.pending-detail a{display:inline-block;margin-top:24px}.site-footer{max-width:1184px;margin:45px auto 0;padding:25px 24px 28px;border-top:1px solid var(--line);color:var(--muted);font-size:11px;display:flex;justify-content:space-between;gap:15px;line-height:1.5}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,20px);padding:13px 20px;background:var(--ink);color:#fff;font-size:12px;border-radius:12px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:10;max-width:calc(100% - 32px);text-align:center}.toast.visible{opacity:1;transform:translate(-50%,0)}.sheet-dialog{border:0;border-radius:20px;padding:20px;background:var(--paper);width:min(900px,calc(100% - 24px));max-height:90vh;overflow:auto}.sheet-dialog::backdrop{background:#19332be0}.sheet-dialog img{width:100%;height:auto;padding-top:30px}.dialog-close{position:sticky;top:0;float:right;border:1px solid var(--line);background:white;border-radius:50%;width:42px;height:42px;z-index:1}.scene-error{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:var(--paper);padding:20px;font-size:12px}.loading{position:absolute;top:15px;left:16px;padding:7px 10px;background:#ffffffd9;border-radius:8px;font-size:11px;color:var(--muted)}
@media(min-width:1500px){.card-visual{height:230px}}@media(max-width:900px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-layout{grid-template-columns:minmax(0,1.25fr) minmax(260px,1fr)}.hero h1{font-size:43px}.card-visual{height:210px}}
@media(max-width:640px){.site-header{padding:16px 18px}.brand{font-size:14px;gap:9px}.brand-mark{width:39px;height:39px;border-radius:12px;font-size:24px}.brand-sub{font-size:10px}.header-link{font-size:11px;gap:5px}main{padding:0 16px}.hero{padding:29px 0 23px;grid-template-columns:1fr;gap:17px}.hero h1{font-size:39px;max-width:340px}.hero p.intro{font-size:13px;line-height:1.6;margin-top:13px}.eyebrow{font-size:10px;margin-bottom:10px}.count-pill{justify-self:start;font-size:11px;padding:8px 12px}.gallery-toolbar{font-size:10px;padding-bottom:14px;gap:10px}.gallery{gap:13px;grid-template-columns:minmax(0,1fr)}.card-visual{height:auto;aspect-ratio:1.65}.card-body{min-height:100px;padding:15px 17px 18px}.card-title{font-size:16px}.card-frame{font-size:11px}.card-arrow{bottom:23px}.gallery-hint{font-size:11px;padding-top:20px}.back-link{margin:21px 0 17px;font-size:11px}.detail-top{display:block;margin-bottom:18px}.detail-title{font-size:31px;line-height:1.1}.frame-description{font-size:12px;margin-top:9px}.choose-button{margin-top:15px;min-height:43px;padding:10px 16px;font-size:12px}.detail-layout{display:flex;flex-direction:column;gap:15px}.scene-panel,.controls{width:100%}.scene-caption{font-size:10px;padding:11px 13px}.scene-canvas{aspect-ratio:1.44}.controls{padding:18px}.controls h2{font-size:14px}.controls-intro{margin-bottom:13px;font-size:11px}.emotion-grid{gap:7px}.emotion-button{font-size:11px;min-height:55px;padding:8px 3px}.emotion-button .emoji{font-size:18px}.image-controls{padding-top:16px;margin-top:17px}.upload-button{min-height:44px;font-size:12px}.privacy-note{font-size:10px;margin-top:8px}.reset-button{margin-top:4px}.detail-lower{display:flex;flex-direction:column;gap:23px;margin-top:24px}.detail-lower>section{width:100%}.notes{padding:20px}.notes p{font-size:11px;line-height:1.7}.section-label{font-size:14px;margin-bottom:11px}.sheet-button{padding:10px}.prototype-nav{margin-top:24px;gap:9px}.nav-prototype{padding:13px;font-size:11px}.nav-prototype span{font-size:9px}.site-footer{margin-top:31px;display:block;padding:21px 18px;font-size:10px}.site-footer span{display:block;margin-top:5px}.pending-detail{padding:40px 18px}.pending-detail h2{font-size:27px}.pending-detail p{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}