:root { color-scheme: light; --paper: #f3eee5; --ink: #383a31; }
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); }
body { margin: 0; color: var(--ink); font-family: Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; }
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
.paper-grain { position: fixed; inset: 0; opacity: .045; pointer-events: none; z-index: 10; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
main { display: grid; grid-template-columns: 40% 60%; min-height: 100svh; max-width: 1600px; margin: auto; align-items: center; padding-left: 8.5%; }
.intro { position: relative; z-index: 2; padding: 44px 0 54px; }
h1 { margin: 0; font: 400 clamp(56px, 6.5vw, 100px)/1.04 Georgia, 'Times New Roman', serif; letter-spacing: -4px; }
h1 em { display: inline-block; font-weight: 400; margin-top: 7px; }
.controls { display: none; margin-top: 36px; }
.js .controls { display: block; }
.shutter { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border: 1px solid transparent; padding: 0; background: var(--ink); color: #fff8ec; border-radius: 50%; cursor: pointer; transition: transform .2s; box-shadow: 0 3px 0 #383a3122; }
.shutter::before { content: ''; position: absolute; inset: -1px; border: 1px solid var(--ink); border-radius: inherit; opacity: 0; pointer-events: none; }
[data-phase="ready"] .shutter:enabled::before { animation: shutter-pulse 2.2s ease-out .25s infinite; }
@keyframes shutter-pulse {
  0% { transform: scale(1); opacity: 0; }
  12% { opacity: .55; }
  72%, 100% { transform: scale(1.75); opacity: 0; }
}
.shutter:hover:enabled { transform: translateY(-2px) scale(1.06); }
[data-phase="ready"] .shutter:is(:hover, :focus-visible)::before { animation: none; }
.shutter:active:enabled { transform: translateY(1px); }
.shutter:disabled { cursor: wait; opacity: .65; }
.shutter-icon { width: 19px; height: 19px; border: 1px solid #fff8ec99; border-radius: 50%; position: relative; }
.shutter-icon::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #fff8ec; }
.scene { position: relative; width: 100%; height: clamp(500px, 58vw, 710px); min-width: 0; isolation: isolate; }
.scene-halo { position: absolute; inset: 4% 0; background: radial-gradient(ellipse at 50% 48%, #e3dac587, #f3eee500 64%); pointer-events: none; }
.model-loader { display: none; position: absolute; inset: 0; z-index: 3; place-items: center; pointer-events: none; }
.js[data-phase="loading"] .model-loader { display: grid; }
.model-loader span { width: 42px; height: 42px; border: 1px solid #383a3133; border-top-color: var(--ink); border-radius: 50%; animation: model-loading .9s linear infinite; }
@keyframes model-loading { to { transform: rotate(1turn); } }
.viewport { position: absolute; inset: 0; transition: opacity 1.2s; }
.viewport canvas { width: 100%; height: 100%; display: block; touch-action: pan-y; }
[data-phase="ready"] .viewport canvas { cursor: pointer; }
.poster { display: none; position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.poster img { width: 100%; height: 100%; object-fit: contain; }
[data-fallback="true"] .poster { display: block; }
[data-fallback="true"] .viewport { display: none; }
[data-fallback="true"][data-phase="opened"] .poster { opacity: .1; pointer-events: none; }
.print-card { position: absolute; top: 47%; left: 48%; width: min(375px, 76%); aspect-ratio: 4 / 5; padding: 17px 17px 0; background: #fffcf4; transform: translate(-50%, -50%) rotate(-4deg); box-shadow: 3px 18px 30px #52402c24, 0 2px 5px #52402c15; }
.print-image { height: 86%; padding: 9% 8%; background: radial-gradient(ellipse at 95% 0%, #efdbbf 0%, transparent 70%), radial-gradient(ellipse at 0% 95%, #dfe1ce 0%, transparent 70%), #e9dfd2; }
.message { font-family: Georgia, 'Times New Roman', serif; color: var(--ink); }
.message h2 { margin: 0 0 18px; font-size: clamp(21px, 2vw, 27px); font-weight: 400; line-height: 1.16; letter-spacing: -.7px; }
.message p { font-size: 17px; line-height: 1.44; margin: 0 0 15px; }
.js .print-card { opacity: 0; visibility: hidden; }
.js .message { opacity: 0; filter: blur(3px); }
.js [aria-hidden="false"].print-card { opacity: 1; visibility: visible; }
[data-phase="developing"] .message,
[data-phase="opened"] .message { opacity: 1; filter: blur(0); transition: opacity 1.6s ease, filter 1.6s ease; }
[data-phase="developing"] .viewport, [data-phase="opened"] .viewport { opacity: .12; }
.flash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 44% 38%, #fffdf6, #fffdf600 70%); opacity: 0; }
.flash.fire { animation: flash .5s ease-out; }
@keyframes flash { 0% { opacity: 0; } 12% { opacity: .8; } 100% { opacity: 0; } }
@media (min-width: 1600px) { main { padding-left: 130px; } }
@media (max-width: 1000px) and (min-width: 701px) {
  main { grid-template-columns: 38% 62%; padding-left: 6.2%; }
  h1 { font-size: 65px; letter-spacing: -3px; }
  .print-card { width: 340px; max-width: 88%; }
  .message p { font-size: 16px; }
  .message h2 { font-size: 24px; }
}
@media (max-width: 700px) {
  main { display: flex; flex-direction: column; justify-content: center; padding: 40px 0; position: relative; }
  .intro { width: 100%; text-align: center; padding: 0 20px; position: static; }
  h1 { font-size: clamp(42px, 9vw, 61px); letter-spacing: -2px; line-height: 1.05; }
  h1 br:nth-of-type(2) { display: none; }
  h1 em { margin: 0 0 0 10px; }
  .scene { height: 420px; margin-top: 20px; margin-bottom: 12px; }
  .controls { position: absolute; left: 0; bottom: 40px; width: 100%; z-index: 4; margin-top: 0; }
  .js main { padding-bottom: 112px; }
  .print-card { width: min(325px, 81%); top: 50%; left: 50%; padding: 14px 14px 0; }
  .print-image { padding: 8% 7%; }
  .message h2 { font-size: 24px; margin-bottom: 15px; }
  .message p { font-size: 16px; line-height: 1.4; margin-bottom: 13px; }
}
@media (max-width: 360px) {
  .scene { height: 370px; }
  .message h2 { font-size: 21px; margin-bottom: 12px; }
  .message p { font-size: 14px; line-height: 1.4; }
}