:root{--lp-bleu: #0062ff;--lp-noir: #000000;--lp-blanc: #ffffff;--lp-vert: #00988f;--lp-orange: #ff4a23;--lp-violet: #9d61ff;--bg: #f0eee8;--ink: #1a1a1a;--ink-soft: #444}html,body,#root{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:Poppins,Inter,system-ui,-apple-system,sans-serif;color:var(--ink)}.hero{position:fixed;top:24px;left:32px;z-index:5;pointer-events:none;width:min(60vw,640px)}.hero h1{margin:0 0 12px;font-size:38px;font-weight:700;letter-spacing:-.025em;line-height:1.1}.hero p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-soft)}.hero p+p{margin-top:10px}.hero a{color:var(--lp-bleu);pointer-events:auto;text-decoration:underline;text-decoration-color:#0062ff59;text-underline-offset:2px;font-weight:500}.hero a:hover{text-decoration-color:var(--lp-bleu)}.hero-hint{font-size:12px;color:#888;font-style:italic}.hero-back{margin-top:14px;pointer-events:auto;background:var(--ink);color:#fff;border:none;border-radius:999px;padding:8px 16px;font-size:13px;cursor:pointer}.hero-back:hover{background:#333}.project-banner{position:fixed;top:28px;right:32px;z-index:5;display:flex;flex-direction:column;align-items:flex-end;gap:4px;pointer-events:none;text-align:right;max-width:min(32vw,380px);opacity:0;transform:translateY(-12px);transition:opacity .45s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}.project-banner.is-visible{opacity:1;transform:translateY(0)}.project-banner-num{font-size:14px;font-weight:600;color:var(--lp-bleu);letter-spacing:.04em}.project-banner-name{font-size:56px;font-weight:700;color:var(--ink);letter-spacing:-.03em;line-height:1;text-shadow:0 2px 8px rgba(255,255,255,.6);word-wrap:break-word;overflow-wrap:break-word}.project-banner-inline{opacity:0;transition:opacity .45s cubic-bezier(.2,.7,.2,1);pointer-events:none}.project-banner-inline.is-visible{opacity:1}.controls-hint{position:fixed;bottom:24px;left:32px;z-index:5;display:flex;flex-direction:column;gap:6px;background:#ffffffeb;padding:10px 14px;border-radius:10px;border:1px solid rgba(0,0,0,.08);font-size:12px;color:#333;pointer-events:none;box-shadow:0 2px 12px #0000000d;opacity:0;transform:translateY(8px);transition:opacity .45s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}.controls-hint.is-visible{opacity:1;transform:translateY(0)}.controls-hint-row{display:flex;align-items:center;gap:10px}.controls-hint kbd{display:inline-block;flex-shrink:0;padding:3px 8px;background:var(--ink);color:#fff;border-radius:4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;letter-spacing:.02em;width:100px;text-align:center;box-sizing:border-box}.carousel-nav{position:fixed;top:68%;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:0 18px;opacity:0;transform:translateY(calc(-50% + 8px));pointer-events:none;transition:opacity .45s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}.carousel-nav.is-visible{opacity:1;transform:translateY(-50%)}.carousel-nav>.carousel-btn{pointer-events:auto}.carousel-btn{width:36px;height:36px;border-radius:50%;border:none;background:var(--ink);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 3px;box-shadow:0 4px 16px #00000026}.carousel-btn:hover{background:#333}.carousel-btn:active{background:#444}.carousel-btn:disabled{background:#ddd;color:#999;cursor:not-allowed}@media (max-width: 767px){.hero{top:14px;left:14px;right:14px;width:auto;max-width:none}.hero h1{font-size:36px;line-height:1.1}.hero p{font-size:12px;line-height:1.45}.hero-in-atelier h1,.hero-in-atelier .hero-desc{display:none}.project-banner-inline{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}.project-banner-inline .project-banner-name{font-size:32px}.project-banner-inline .project-banner-num{font-size:11px}.hero-back-bottom{position:fixed;bottom:50px;left:50%;transform:translate(-50%,8px);z-index:5;margin-top:0;box-shadow:0 4px 16px #00000026;opacity:0;pointer-events:none;transition:opacity .45s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}.hero-back-bottom.is-visible{opacity:1;transform:translate(-50%);pointer-events:auto}.controls-hint{display:none}.credits{bottom:10px;left:50%;right:auto;transform:translate(-50%);width:calc(100% - 24px);text-align:center;font-size:10px;white-space:normal;line-height:1.3}}.credits{position:fixed;bottom:16px;right:24px;z-index:5;font-size:12px;color:#555;pointer-events:none}.credits a{color:var(--lp-bleu);pointer-events:auto;text-decoration:underline;text-decoration-color:#0062ff59;text-underline-offset:2px;font-weight:500}.credits a:hover{text-decoration-color:var(--lp-bleu)}.back-to-gallery{position:fixed;bottom:16px;left:16px;z-index:100;background:#000000b3;color:#fff;text-decoration:none;padding:6px 12px;border-radius:6px;font-size:12px}.viewer-overlay{position:fixed;top:12px;left:12px;background:#0009;color:#fff;padding:8px 12px;border-radius:6px;font-size:13px;pointer-events:none;z-index:10}.viewer-overlay select,.viewer-overlay button,.viewer-overlay input,.viewer-overlay textarea{pointer-events:auto;margin-left:8px;padding:4px 6px;background:#222;color:#fff;border:1px solid #555;border-radius:4px;cursor:pointer;font-size:12px}.viewer-overlay button:hover{background:#333}