/* Operation Kitsune — on top of the Tanuki skin (theme-tanuki.css).
   The lacquer panel now holds Sagasu, a search engine laid out the way people
   know one: a logo, one box, blue titles. The opening flies through a thousand
   torii gates (tools/tunnel.js) and closes into that panel. */

/* ------------------------------------------------------------- the room */
/* Two handles between the panels set their widths (room.js keeps them in this browser);
   the order stays board · Sagasu · case card. Each handle fills the 14 px gap it replaces. */
.room-split{display:none}
@media(min-width:941px){
  .room{gap:0}
  .room>.board-panel{flex:var(--w-board,24) 1 0}
  .room>.terminal-panel{flex:var(--w-term,40) 1 0}
  .room>.story-panel{flex:var(--w-story,36) 1 0}
  .room-split{position:relative;display:block;flex:0 0 14px;cursor:col-resize;touch-action:none;outline:none}
  .room-split:before{content:"";position:absolute;left:50%;top:50%;width:4px;height:40px;margin:-20px 0 0 -2px;border-radius:4px;background:rgba(29,24,20,.22);opacity:.45;
    transition:opacity .2s ease,height .2s ease,margin .2s ease,background .2s ease}
  .room-split:hover:before,.room-split.is-active:before{opacity:1;height:76px;margin-top:-38px;background:var(--accent)}
  .room-split:focus-visible:before{opacity:1;height:76px;margin-top:-38px;background:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
  .room.is-resizing{cursor:col-resize;user-select:none;-webkit-user-select:none}
  .room.is-resizing>section{transition:none!important;pointer-events:none}
}

/* Board notes and photos can be made much smaller. A note's writing, its ruled lines and its
   margins follow its width (15 px writing at the usual 230 px, never under 9 px), and a photo's
   border and caption follow the photo. */
.board-item.note{container-type:size}
.board-item:not(.note){container-type:inline-size}
.board-note{padding:clamp(12px,10cqi,22px) clamp(7px,6.5cqi,15px) clamp(6px,6cqi,14px)}
.board-note textarea{font-size:max(7px,calc(clamp(9px,calc(3px + 5.2cqi),15px) * var(--note-scale,1)));line-height:1.74;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 calc(1.74em - 1px),var(--rule) calc(1.74em - 1px) 1.74em) 0 0/100% 1.74em local}
.board-photo{padding:clamp(4px,4.5cqi,8px) clamp(4px,4.5cqi,8px) clamp(5px,5.5cqi,10px)}
.board-caption{margin-top:clamp(4px,5cqi,9px);font-size:clamp(9px,6.5cqi,12px)}
/* A- and A+ at a note's lower left change its writing size; they show with the other corner
   buttons on hover or focus. */
.board-size{position:absolute;z-index:6;left:-9px;bottom:-12px;display:flex;gap:1px;padding:2px;border-radius:999px;background:#fff;
  box-shadow:0 3px 8px rgba(18,22,30,.25),0 0 0 1px rgba(5,5,5,.06);opacity:0;transform:scale(.8);transition:opacity .2s,transform .2s}
.board-item:hover .board-size,.board-item:focus-within .board-size{opacity:1;transform:none}
.board-font{display:grid;place-items:center;width:28px;height:22px;padding:0;border:0;border-radius:999px;background:none;color:var(--ink);font:800 11.5px/1 var(--ui);cursor:pointer}
.board-font:hover{background:var(--accent-soft);color:var(--accent-hover)}
.board-font:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media(hover:none){.board-size{opacity:1;transform:none}}
/* On a small note the scrollbar goes (the wheel still scrolls) and the corner buttons shrink. */
@container (max-width:150px){
  .board-note textarea{scrollbar-width:none}
  .board-note textarea::-webkit-scrollbar{display:none}
  .board-remove,.board-tint{top:-10px;width:22px;height:22px;font-size:14px}
  .board-remove{right:-8px}.board-tint{left:-8px}
  .board-tint:after{width:10px;height:10px}
  .board-pin{top:-9px;width:19px;height:19px;margin-left:-9.5px}
  .board-size{left:-7px;bottom:-10px}
  .board-font{width:22px;height:18px;font-size:10px}
}

/* ---- The case card, calmer ------------------------------------------------
   A Hide picture button folds the evidence viewer to a slim bar (thumbnail, file
   name, pin), giving the story the whole card. The story's type is a size
   smaller so a card fits without scrolling, and the scrollbar only shows when
   the pointer is over the text. */
.viewer-fold{display:inline-flex;align-items:center;gap:6px;flex:none;height:34px;margin-left:auto;padding:0 12px;border:1px solid var(--v-line);border-radius:999px;background:var(--v-chip);color:var(--v-text);font:600 13px/1 var(--ui);cursor:pointer;transition:border-color .2s,color .2s}
.viewer-fold .icon{width:15px;height:15px;transition:transform .3s ease}
.viewer-fold:hover{border-color:var(--v-line-hover);color:var(--v-text-strong)}
.case-viewer.is-examining .viewer-fold{display:none}
.viewer-thumb{display:none}
/* Words on a picture, found the way an old puzzle game hides them: a magnifier cursor near
   words too small to read, a glow and a Copy text tab once they can be read. */
.print-art{position:relative;display:block;width:100%;height:100%}
.print-clue{position:absolute;border-radius:3px;pointer-events:none;transition:box-shadow .3s ease,background .3s ease}
.viewer-stage.is-zoomed{cursor:move}
.viewer-stage.clue-near{cursor:zoom-in}
.viewer-stage.clue-hot{cursor:copy}
.viewer-object.clue-on .print-clue{background:rgba(255,226,160,.14);box-shadow:0 0 0 2px rgba(239,122,99,.95),0 0 16px rgba(255,170,90,.65);animation:clue-pulse 1.8s ease-in-out infinite}
.clue-chip{position:absolute;left:0;top:0;z-index:6;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px 0 10px;border:1px solid rgba(201,162,75,.55);border-radius:999px;
  background:#1d1814;color:#f6ead0;font:700 12.5px/1 var(--ui);white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.3);cursor:pointer;animation:clue-in .2s ease-out}
.clue-chip[hidden]{display:none}
.clue-chip .icon{width:14px;height:14px}
.clue-chip:hover{background:#c8372d;border-color:#c8372d;color:#fff}
@keyframes clue-pulse{50%{box-shadow:0 0 0 2px rgba(239,122,99,.6),0 0 26px rgba(255,170,90,.85)}}
@keyframes clue-in{from{opacity:0;translate:0 6px}}
/* In a narrow picture column the header buttons keep only their icons, so the file name stays readable. */
.case-viewer{container-type:inline-size}
@container (max-width:300px){
  .viewer-fold span,.viewer-examine span{display:none}
  .viewer-fold,.viewer-examine{width:34px;padding:0;justify-content:center}
}
.case-card.is-viewer-folded{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto minmax(0,1fr)!important}
.case-card.is-viewer-folded .case-viewer{flex-direction:row;align-items:center;margin:8px 8px 0}
.case-card.is-viewer-folded .viewer-stage,.case-card.is-viewer-folded .viewer-coach,.case-card.is-viewer-folded .turn-button,
.case-card.is-viewer-folded .viewer-tools,.case-card.is-viewer-folded .viewer-examine{display:none}
.case-card.is-viewer-folded .viewer-head{flex:1;min-width:0;padding:8px 10px}
.case-card.is-viewer-folded .viewer-thumb:not([hidden]){display:block;flex:none;width:34px;height:34px;object-fit:cover;border:2px solid #fff;border-radius:4px;box-shadow:0 2px 6px rgba(60,35,15,.2)}
.case-card.is-viewer-folded .viewer-controls{flex-direction:row;padding:8px 10px 8px 0}
.case-card.is-viewer-folded .viewer-controls .pin-action{height:34px}
.case-card.is-viewer-folded .viewer-fold .icon{transform:rotate(180deg)}
.card-topline{min-height:46px;padding-top:10px;padding-bottom:9px}
/* The board's hint stays on one line, and leaves when the board is too narrow for it. */
.board-panel{container-type:inline-size}
.board-move-hint{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@container (max-width:480px){.board-move-hint{display:none}.board-toolbar{justify-content:flex-end}}
.card-body{scrollbar-width:thin;scrollbar-color:transparent transparent;padding-top:14px;padding-bottom:12px}
.card-body:hover,.card-body:focus-within{scrollbar-color:#d6c8a6 transparent}
.card-body .chapter-title{margin-bottom:10px;font-size:clamp(26px,2.2vw,36px)}
.card-body .chapter-deck{margin-bottom:12px;font-size:clamp(16px,1.2vw,18px)}
.card-body .chapter-copy{margin-bottom:10px;font-size:15px;line-height:1.55}
.card-body .chapter-rule{margin:12px 0}
/* The card's own question box repeated the evidence check below it: it is now one tip line. */
.card-body .question-card{margin:6px 0 4px;padding:0 0 0 12px;border:0;border-left:3px solid #c8372d;border-radius:0;background:none}
.card-body .question-card h2{display:inline;margin:0 6px 0 0;font-size:15px;line-height:1.5;letter-spacing:-.01em}
.card-body .question-card p{display:inline;font-size:15px;line-height:1.5}
.card-body .question-mark{display:none}
/* The step label repeated the line above it and the chapter pills. */
.card-body .chapter-kicker{display:none}
/* Helper text only when there is something to say. */
#answer-status:empty{display:none}
.card-body .source-line{margin-top:8px;font-size:13px}
/* In a narrow story column (picture shown beside it), the story type steps down once more. */
.card-body{container-type:inline-size}
@container (max-width:340px){
  .card-body .chapter-title{font-size:27px;margin-bottom:8px}
  .card-body .chapter-copy,.card-body .question-card h2,.card-body .question-card p{font-size:14px;line-height:1.45}
  .card-body .source-line span{display:none}
}

/* The case card: the story gets more of the width than the picture beside it, and,
   stacked in a narrow column, most of the height. */
.case-card.is-wide{grid-template-columns:minmax(0,.8fr) minmax(290px,1.2fr)}
/* Side by side: picture and story share the top; the answer box runs the full width beneath them,
   so it never squeezes the story into a narrow column. */
.case-card.is-wide{grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"viewer top" "viewer body" "dock dock"}
.case-card.is-wide .case-brief{display:contents}
.case-card.is-wide .case-viewer{grid-area:viewer}
.case-card.is-wide .card-topline{grid-area:top}
.case-card.is-wide .card-body{grid-area:body}
.case-card.is-wide .dock{grid-area:dock}
.case-card.is-wide.is-viewer-folded{grid-template-rows:auto auto minmax(0,1fr) auto!important;grid-template-areas:"viewer" "top" "body" "dock"}
/* Shown in a narrow card, the picture keeps a real height, its two buttons share one row and the
   drag hint steps aside, so the print never sits on the controls. */
.case-card:not(.is-wide):not(.is-viewer-folded){grid-template-rows:minmax(280px,50%) minmax(0,1fr)}
.case-card:not(.is-wide) .viewer-controls{flex-direction:row;flex-wrap:wrap;gap:8px;padding:6px 12px 10px}
.case-card:not(.is-wide) .viewer-coach{display:none}
@media(max-height:720px) and (min-width:941px){
  .dock{gap:8px;padding:10px 16px 12px}
  .answer-check{gap:6px}
  .answer-check label{font-size:16px}
  .answer-row input,.answer-row button{height:42px}
  .nav-button{height:38px}
  .card-body{padding-top:12px}
  .chapter-copy{margin-bottom:10px}
}
/* The search panel is a CRT behind its paper doors: scanlines, curved-glass shading, a soft
   highlight and a slow refresh band over Sagasu, tuned lighter for its cream page. */
.terminal-panel .terminal-open:before{display:block;content:"";position:absolute;inset:0;z-index:7;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(ellipse at 50% 46%,transparent 52%,rgba(20,12,6,.10) 78%,rgba(10,6,3,.32) 100%),
    radial-gradient(ellipse 110% 30% at 26% 0%,rgba(255,250,235,.16),transparent 78%),
    linear-gradient(118deg,rgba(255,255,255,.07),transparent 26%,transparent 74%,rgba(255,255,255,.04)),
    repeating-linear-gradient(0deg,rgba(40,25,10,.075) 0 1px,rgba(255,255,255,0) 1px 3px);
  box-shadow:inset 0 0 22px 4px rgba(10,6,3,.34),inset 0 2px 5px rgba(255,245,220,.25)}
.terminal-panel .terminal-open:after{display:block;content:"";position:absolute;left:0;right:0;top:0;height:100%;z-index:7;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0) 44%,rgba(255,250,235,.07) 50%,rgba(255,255,255,0) 56%);animation:crt-refresh 9s linear infinite}

/* Switching on: the doors slide apart on a dark screen, then the TV flashes on (a bright line,
   a dot, the picture expanding with a burst of brightness and a light band down the glass), then
   one diagonal glare crosses the glass. Switching off: the picture collapses, then the doors close. */
.crt-flash{position:absolute;left:0;right:0;top:50%;z-index:8;height:0;pointer-events:none}
.crt-flash:before{content:"";position:absolute;left:3%;right:3%;top:-1.5px;height:3px;border-radius:3px;background:#fff8ea;box-shadow:0 0 10px 3px rgba(255,248,234,.85),0 0 46px 12px rgba(239,122,99,.38);opacity:0}
.crt-flash:after{content:"";position:absolute;left:50%;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:radial-gradient(circle,#fff 0 20%,rgba(255,248,234,.7) 36%,rgba(239,122,99,.28) 58%,rgba(239,122,99,0) 72%);opacity:0}
.crt-glare{position:absolute;inset:0;z-index:9;overflow:hidden;border-radius:inherit;pointer-events:none}
/* A broad sheen with a thin streak behind it; it also washes out what lies under it, so it
   still reads on Sagasu's cream page. */
.crt-glare:before{content:"";position:absolute;top:-25%;bottom:-25%;left:-50%;width:42%;opacity:0;transform:skewX(-22deg);
  background:
    linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,252,240,.5) 22%,rgba(255,255,255,.9) 34%,rgba(255,252,240,.5) 46%,rgba(255,255,255,0) 60%,
      rgba(255,255,255,0) 70%,rgba(255,255,255,.75) 75%,rgba(255,255,255,0) 80%);
  -webkit-backdrop-filter:brightness(1.22) saturate(.7);backdrop-filter:brightness(1.22) saturate(.7);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 38%,transparent 58%,transparent 69%,#000 75%,transparent 81%);
  mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 38%,transparent 58%,transparent 69%,#000 75%,transparent 81%)}
.terminal-panel.tv-on .terminal-open{animation:tv-on .95s cubic-bezier(.2,.7,.2,1) .8s both}
.terminal-panel.tv-on .crt-flash:before{animation:tv-on-line .95s cubic-bezier(.2,.7,.2,1) .8s both}
.terminal-panel.tv-on .crt-flash:after{animation:tv-on-dot .95s ease-out .8s both}
.terminal-panel.tv-on:after{display:block;animation:tv-scan 1.2s ease-out .8s both}
.terminal-panel.tv-on .crt-glare:before{animation:crt-glare 1s cubic-bezier(.45,0,.25,1) 1.75s both}
.terminal-panel.tv-off .terminal-open{animation:tv-off .5s cubic-bezier(.55,0,.75,.2) forwards}
.terminal-panel.tv-off .crt-flash:before{animation:tv-off-line .5s cubic-bezier(.55,0,.75,.2) forwards}
.terminal-panel.tv-off .crt-flash:after{animation:tv-off-dot .8s ease-out forwards}
.terminal-panel.tv-off .tv-glow:before{animation:shoji-close-l .5s cubic-bezier(.6,.05,.3,1) .45s both}
.terminal-panel.tv-off .tv-glow:after{animation:shoji-close-r .5s cubic-bezier(.6,.05,.3,1) .45s both}
@keyframes crt-glare{0%{opacity:0;transform:translateX(0) skewX(-22deg)}12%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(480%) skewX(-22deg)}}
@media(prefers-reduced-motion:reduce){.terminal-panel .terminal-open:after{animation:none}}
.terminal-title{font-family:var(--display);font-size:17px;letter-spacing:.02em;color:#f3e6c8}
.mast-sub{color:#a08a5c;font:500 12px/1 var(--mono);letter-spacing:.04em}
.sagasu-host{flex:1;min-height:0;display:flex}
.sg-l0,.sg-l3{color:#2b4a8a}.sg-l1,.sg-l5{color:#c8372d}.sg-l2{color:#c9922e}.sg-l4{color:#3d7a3a}

/* ---------------------------------------------------------- the browser */
.sg{--sg-ink:#1d1814;--sg-soft:#4b4036;--sg-muted:#7a6b5a;--sg-line:#e2d6bb;--sg-link:#23439b;--sg-green:#2f6b3a;
  flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:#fbf6ea;color:var(--sg-ink);font:400 14px/1.5 var(--sans,"Inter",system-ui,sans-serif);container-type:inline-size}
.sg button{font:inherit;color:inherit}
.sg :focus-visible{outline:2px solid #c8372d;outline-offset:2px}
.sg-bar{display:flex;align-items:center;gap:4px;flex:none;padding:7px 10px;background:#1b1310;border-bottom:1px solid rgba(201,162,75,.35)}
.sg-nav{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:none;color:#c9a24b!important;cursor:pointer}
.sg-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sg-nav:hover:not(:disabled){background:rgba(201,162,75,.16)}
.sg-nav:disabled{opacity:.35;cursor:default}
.sg-address{flex:1;min-width:0;display:flex;align-items:center;gap:7px;margin:0 0 0 6px;padding:7px 12px;border-radius:999px;background:#2a1e17;color:#e8d4a6;font:500 12.5px/1.2 var(--mono,"JetBrains Mono",monospace);white-space:nowrap;overflow:hidden}
.sg-address svg{flex:none;width:12px;height:12px;color:#8fb07a}
.sg-address span{overflow:hidden;text-overflow:ellipsis}
.sg-body{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:0 minmax(0,1fr);transition:grid-template-columns .24s ease}
.sg-body:has(.sg-help[open]){grid-template-columns:190px minmax(0,1fr)}
.sg-foot{flex:none;margin:0;padding:6px 12px;border-top:1px solid var(--sg-line);background:#f4ecda;color:var(--sg-muted);font:500 11.5px/1.3 var(--mono,"JetBrains Mono",monospace);text-align:center}

/* The detective's lens opens the existing paper-slip search guide. */
.sg-help{position:absolute;z-index:5;top:12px;left:16px;width:185px;max-width:calc(100% - 32px);border:0;border-radius:6px;background:none}
.sg-help summary{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 10px 6px 6px;list-style:none;color:#714b29;font:700 12px/1.3 var(--ui);cursor:pointer;user-select:none;border-radius:6px}
.sg-help summary::-webkit-details-marker{display:none}
.sg-help summary::after{content:'+';margin-left:auto;color:#a7352b;font:600 18px/1 var(--mono)}
.sg-help-lens{display:grid;place-items:center;flex:none;width:36px;height:36px;border:1px solid #c9a24b;border-radius:50%;background:#eadbb9;color:#a7352b}
.sg-help-lens svg{width:31px;height:31px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform-origin:65% 70%;animation:sg-help-search 1.4s ease-in-out 2}
.sg-help-copy{display:flex;flex-direction:column;gap:3px}
.sg-help-copy small{font:500 9px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#7a6b5a}
.sg-help summary:hover .sg-help-lens svg{animation:sg-help-search 1.4s ease-in-out infinite}
.sg-help[open]{position:relative;grid-column:1;grid-row:1;top:0;left:0;width:100%;max-width:none;min-width:0;min-height:0;border:0;border-right:1px solid #dac99f;border-radius:0;background:#f1e5c9;overflow:hidden;animation:sg-help-reveal .24s ease-out}
.sg-help[open] summary{height:72px;padding:12px 8px;border-bottom:1px solid #dac99f;border-radius:0}
.sg-help[open] summary .sg-help-lens svg{animation:none}
.sg-help[open] .sg-tricks{animation:sg-help-reveal .2s ease-out}
@keyframes sg-help-search{0%,100%{transform:translate(0) rotate(0)}35%{transform:translate(-2px,-2px) rotate(-17deg)}70%{transform:translate(2px,0) rotate(10deg)}}
@keyframes sg-help-reveal{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.sg-body{transition:none}.sg-help[open],.sg-help .sg-help-lens svg,.sg-help summary:hover .sg-help-lens svg,.sg-help[open] .sg-tricks{animation:none}}
.sg-help[open] summary::after{content:'−'}
.sg-help summary:hover{background:#eee0be}
.sg-tricks{position:absolute;inset:72px 0 0;min-height:0;overflow:auto;padding:12px 10px 14px 12px;background:
  radial-gradient(circle at 50% 100%,transparent 9px,rgba(150,110,60,.08) 9.5px,transparent 10.5px) 0 0/30px 15px,#f1e5c9}
.sg-tricks-head{margin:2px 2px 10px;color:#9e2a22;font:800 11.5px/1 var(--sans,"Inter",sans-serif);letter-spacing:.16em;text-transform:uppercase}
.sg-trick{position:relative;display:grid;gap:3px;width:100%;margin:0 0 10px;padding:10px 11px 9px;border:1px solid #e3d3ad;border-radius:3px;background:#fffaec;text-align:left;cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 3px 8px rgba(80,50,20,.1);transform:rotate(-.4deg);transition:transform .18s,box-shadow .18s}
.sg-trick:nth-of-type(even){transform:rotate(.4deg)}
.sg-trick:before{content:"";position:absolute;left:50%;top:-7px;width:38px;height:13px;margin-left:-19px;background:rgba(239,217,160,.75);box-shadow:0 1px 2px rgba(80,50,20,.12);transform:rotate(-3deg)}
.sg-trick:hover{transform:rotate(0) translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 8px 16px rgba(80,50,20,.16)}
.sg-trick code{color:#c8372d;font:800 15px/1.2 var(--mono,"JetBrains Mono",monospace)}
.sg-trick span{color:var(--sg-ink);font:500 12.5px/1.3 var(--sans,"Inter",sans-serif)}
.sg-trick small{color:var(--sg-muted);font:500 11.5px/1.3 var(--mono,"JetBrains Mono",monospace);overflow-wrap:anywhere}
.sg-try{position:absolute;right:-6px;top:-8px;display:none;place-items:center;width:30px;height:30px;border:2px solid #c8372d;border-radius:50%;background:#fff6f0;color:#c8372d;font:800 10.5px/1 var(--sans,"Inter",sans-serif);font-style:normal;letter-spacing:.06em;text-transform:uppercase;transform:rotate(12deg)}
.sg-trick.is-suggested{border-color:#c8372d;box-shadow:0 0 0 2px rgba(200,55,45,.22),0 6px 14px rgba(80,50,20,.14)}
.sg-trick.is-suggested .sg-try{display:grid;animation:sg-seal .5s cubic-bezier(.3,1.6,.5,1) both}
.sg-tricks-foot{margin:6px 2px 0;color:var(--sg-muted);font:500 11.5px/1.4 var(--sans,"Inter",sans-serif)}

.sg-view{grid-column:2;grid-row:1;min-width:0;min-height:0;container-type:inline-size;overflow:auto;padding:82px 22px 26px;scrollbar-color:#d8c9a6 transparent}
.sg-view:focus{outline:none}

/* Home */
.sg-home{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100%;padding:4% 0 10%;text-align:center}
.sg-logo{margin:0 0 22px;font:900 clamp(44px,13cqi,74px)/1 var(--display,"Playfair",Georgia,serif);letter-spacing:-.01em}
.sg-logo span{display:inline-block;animation:sg-letter .7s cubic-bezier(.2,.9,.3,1.3) both}
.sg-logo span:nth-child(2){animation-delay:.05s}.sg-logo span:nth-child(3){animation-delay:.1s}.sg-logo span:nth-child(4){animation-delay:.15s}.sg-logo span:nth-child(5){animation-delay:.2s}.sg-logo span:nth-child(6){animation-delay:.25s}
.sg-logo.is-small{margin:0;font-size:26px;flex:none}
.sg-logo.is-small span{animation:none}
.sg-home-note{max-width:34em;margin:22px 0 0;color:var(--sg-muted);font-size:13.5px}
.sg-form{display:flex;align-items:center;gap:8px;width:100%;min-width:0}
.sg-form.is-home{flex-direction:column;gap:18px;max-width:560px}
.sg-box{flex:1;min-width:0;width:100%;display:flex;align-items:center;gap:9px;height:46px;padding:0 16px;border:1px solid #d6c8a6;border-radius:999px;background:#fff;box-shadow:0 1px 4px rgba(80,50,20,.08);transition:box-shadow .2s,border-color .2s}
.sg-box:focus-within{border-color:#c9a24b;box-shadow:0 2px 12px rgba(80,50,20,.16)}
.sg-box svg{flex:none;width:18px;height:18px;fill:none;stroke:#8a7b69;stroke-width:2;stroke-linecap:round}
.sg-box input{flex:1;min-width:0;height:100%;border:0;background:none;color:var(--sg-ink);font:500 15px/1 var(--mono,"JetBrains Mono",monospace);outline:none}
.sg-box input::placeholder{color:#a8998a;font-family:var(--sans,"Inter",sans-serif)}
.sg .sg-box input:focus-visible{outline:none}
.sg-buttons{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.sg-buttons button,.sg-go{min-height:38px;padding:0 18px;border:1px solid #e2d6bb;border-radius:6px;background:#f4ecda;color:var(--sg-ink);font:600 13.5px/1 var(--sans,"Inter",sans-serif);cursor:pointer}
.sg-buttons button:hover,.sg-go:hover{border-color:#c9a24b;background:#efe3c6}
.sg-go{flex:none;height:46px;border-radius:999px;background:#1d1814;border-color:#1d1814;color:#fbf6ea!important}
.sg-go:hover{background:#3b3129}

/* Results */
.sg-serp-head{display:flex;align-items:center;gap:14px;margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid var(--sg-line)}
.sg-stats{margin:0 0 14px;color:var(--sg-muted);font-size:13px}
.sg-note{margin:0 0 12px;padding:8px 12px;border-left:3px solid #c8372d;background:#fff2e6;color:#6b2a20;font-size:13px}
.sg-note a{color:var(--sg-link);font-family:var(--mono,"JetBrains Mono",monospace)}
.sg-results{margin:0;padding:0;list-style:none}
.sg-result{position:relative;margin:0 0 20px;padding-right:58px}
.sg-cite{display:flex;align-items:center;gap:9px;margin:0 0 3px}
.sg-fav{display:grid;place-items:center;width:26px;height:26px;flex:none;border:1px solid var(--sg-line);border-radius:50%;background:#fff;color:#9e2a22;font:800 12px/1 var(--display,"Playfair",serif)}
.sg-cite b{display:block;color:var(--sg-ink);font-weight:600;font-size:13.5px;line-height:1.2}
.sg-cite small{display:block;color:var(--sg-green);font:500 12px/1.3 var(--mono,"JetBrains Mono",monospace);overflow-wrap:anywhere}
.sg-result h4{margin:0;font:500 18px/1.3 var(--sans,"Inter",sans-serif)}
.sg-result h4 a{color:var(--sg-link);text-decoration:none}
.sg-result h4 a:hover{text-decoration:underline}
.sg-result h4 a:visited{color:#6b3a8a}
.sg-badge{display:inline-block;margin-right:7px;padding:2px 5px;border-radius:3px;background:#9e2a22;color:#fff;font:800 10.5px/1.2 var(--mono,"JetBrains Mono",monospace);vertical-align:2px}
.sg-badge.is-sheet{background:#2f6b3a}
.sg-snippet{margin:4px 0 0;color:var(--sg-soft);font-size:14px;line-height:1.55}
.sg-snippet time{color:var(--sg-muted)}
.sg-snippet b{color:var(--sg-ink);font-weight:700}
.sg-pin{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border:1px solid #e2d6bb;border-radius:999px;background:#fff;color:var(--sg-soft)!important;font:600 12px/1 var(--sans,"Inter",sans-serif)!important;cursor:pointer}
.sg-pin svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.sg-pin:hover{border-color:#c8372d;color:#c8372d!important}
.sg-result .sg-pin{position:absolute;right:0;top:2px}
.sg-none{padding:6px 0;color:var(--sg-soft)}
.sg-none p{margin:0 0 10px;font-size:15px}
.sg-none ul{margin:0;padding-left:20px;font-size:13.5px}
.sg-pager{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 10px;margin:8px 0 0;padding-top:16px;border-top:1px solid var(--sg-line)}
.sg-pager-logo{flex-basis:100%;text-align:center;color:#c8372d;font:900 22px/1 var(--display,"Playfair",serif);letter-spacing:.02em}
.sg-pager button{min-width:30px;height:30px;padding:0 8px;border:0;border-radius:6px;background:none;color:var(--sg-link)!important;font-weight:600;cursor:pointer}
.sg-pager button:hover{background:#efe3c6}
.sg-pager b{min-width:30px;height:30px;display:grid;place-items:center;border-radius:6px;background:#1d1814;color:#fbf6ea}

/* Pages from the index */
.sg-page-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px;color:var(--sg-muted);font:600 12px/1 var(--sans,"Inter",sans-serif);letter-spacing:.08em;text-transform:uppercase}
.sg-page-tools span{margin-right:auto}
.sg-site{overflow:hidden;border:1px solid var(--sg-line);border-radius:10px;background:#fff;box-shadow:0 6px 22px rgba(80,50,20,.08)}
.sg-site>header{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px}
.sg-site>h3{margin:18px 18px 8px;font:800 22px/1.2 var(--display,"Playfair",serif)}
.sg-site>p{margin:0 18px 12px;color:#3b3129;font-size:14.5px;line-height:1.6}
.sg-site nav{display:flex;gap:12px;flex-wrap:wrap;margin-left:auto}
.sg-site nav a,.sg-links a{color:inherit;font-size:13px;font-weight:600}
.sg-links{padding-bottom:4px}
.sg-links a{color:var(--sg-link)}
.sg-deadlink{color:#8a7b69;text-decoration:underline dotted}
.sg-crest{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#c8372d;color:#fff;font:700 16px/1 "Yu Gothic","Hiragino Sans",sans-serif}
.is-shop>header{background:#f6efe0;border-bottom:2px solid #c8372d;color:#1d1814}
.is-shop>header strong{font:900 15px/1 var(--display,"Playfair",serif);letter-spacing:.14em}
.is-stall>header{background:#141a3a;color:#f3e6c8}
.is-stall>header strong{font:900 15px/1 var(--display,"Playfair",serif);letter-spacing:.14em;color:#e2ba60}
.is-stall .sg-crest{background:#e2ba60;color:#141a3a}
.is-forum>header{background:#4b4a8a;color:#fff}
.is-forum>header strong{font:800 17px/1 var(--sans,"Inter",sans-serif)}
.is-forum>header span{color:#d8d6ff;font-size:12.5px}
.sg-forum-path{margin:12px 18px 0!important;color:#6b6a9a!important;font-size:12.5px!important}
.sg-post{margin:0 18px 12px;border:1px solid #dcdaf0;border-radius:6px;overflow:hidden}
.sg-post-head{display:flex;justify-content:space-between;gap:10px;margin:0;padding:7px 12px;background:#efeefa;color:#3a3970;font-size:13px}
.sg-post-head time{color:#6b6a9a;font:500 12px/1.4 var(--mono,"JetBrains Mono",monospace)}
.sg-post p:not(.sg-post-head){margin:9px 12px;color:#2b2a40;font-size:14px;line-height:1.55}
.is-blog>header{border-bottom:1px solid #eee}
.is-blog>header strong{font:800 15px/1 var(--mono,"JetBrains Mono",monospace)}
.sg-byline{color:#8a8a8a!important;font-size:12.5px!important}
.is-dir{border-radius:2px;box-shadow:none;font-family:"Times New Roman",Times,serif;color:#000}
.is-dir h3{margin:14px 16px 10px;font:700 26px/1.2 "Times New Roman",Times,serif}
.is-dir table{width:calc(100% - 32px);margin:0 16px;border-collapse:collapse;font-size:15px}
.is-dir th{padding:4px 8px 4px 0;border-bottom:1px solid #000;text-align:left;font-weight:700}
.is-dir td{padding:3px 8px 3px 0;white-space:nowrap}
.is-dir td a{color:#0000ee}
.is-dir address{margin:12px 16px 14px;padding-top:8px;border-top:1px solid #000;font-size:14px}
.is-pdf{background:#5d6168;border-color:#4a4d53}
.is-pdf>header{justify-content:space-between;background:#2f3237;color:#e8e8ea;font:500 12.5px/1 var(--mono,"JetBrains Mono",monospace)}
.sg-pdf-page{margin:14px auto;width:min(92%,560px);padding:26px 28px;background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.sg-pdf-page p{margin:0 0 8px;color:#222;font:400 13.5px/1.5 Georgia,serif}
.sg-pdf-page p.is-title{margin-bottom:14px;font-weight:700;letter-spacing:.06em}
.sg-pdf-page.is-scan{padding:0}
.sg-pdf-page img{display:block;width:100%;height:auto}
.sg-pdf-note{margin:0 18px 14px!important;color:#f0eee8!important;font-size:12.5px!important}
.is-sheet>header{justify-content:space-between;background:#1f6b3a;color:#fff;font:500 12.5px/1 var(--mono,"JetBrains Mono",monospace)}
.is-sheet table{width:calc(100% - 24px);margin:12px;border-collapse:collapse;font:13px/1.3 var(--sans,"Inter",sans-serif)}
.is-sheet th,.is-sheet td{padding:6px 8px;border:1px solid #d6dbd6;text-align:left}
.is-sheet thead th,.is-sheet tbody th{background:#eef2ee;color:#4a564a;font-weight:600}
.sg-private{filter:blur(5px);user-select:none;-webkit-user-select:none}
.is-sheet .sg-pdf-note{color:#5a4a3a!important}
.is-article>header{border-bottom:1px solid #eee}
.is-article>header strong{font:800 16px/1 var(--display,"Playfair",serif)}

/* Keep a separate, slimmer left rail in narrow terminals; never overlay search. */
@container (max-width:520px){
  .sg-body:has(.sg-help[open]){grid-template-columns:132px minmax(0,1fr)}
  .sg-help[open] summary{gap:5px;padding:12px 6px}
  .sg-help[open] .sg-help-lens{width:26px;height:26px}
  .sg-help[open] .sg-help-lens svg{width:23px;height:23px}
  .sg-help[open] .sg-help-copy{font-size:11px}
  .sg-help[open] .sg-help-copy small{font-size:8px;letter-spacing:0}
  .sg-tricks{padding:12px 8px}
  .sg-tricks-head{font-size:10px;letter-spacing:.08em}
  .sg-trick small{display:none}
  .sg-try{right:-4px;top:-6px;width:26px;height:26px;font-size:9.5px}
  .sg-view{padding:82px 14px 22px}
  .sg-serp-head{flex-direction:column;align-items:stretch;gap:10px}
  .sg-result{padding-right:0}
  .sg-result .sg-pin{position:static;margin-top:6px}
}
@container (max-width:260px){
  .sg-logo{font-size:clamp(30px,17cqi,44px)}
  .sg-form:not(.is-home){flex-wrap:wrap}
  .sg-form:not(.is-home) .sg-box{flex-basis:100%}
  .sg-box{padding:0 8px;gap:5px}
  .sg-box input{font-size:12px}
}
@media(max-width:940px){.terminal-panel{height:720px}}

/* ----------------------------------------------------------- the opening */
.op-kitsune{background:#04050c}
.op-gatehouse{position:absolute;inset:0;z-index:-2;overflow:hidden}
.op-tunnel{position:absolute;inset:0;display:block;width:100%;height:100%}
/* Kept light: no full-screen filter and no grain over the moving canvas, and the
   room underneath is not painted (its glowing rail animates) until the flyer scene. */
.op-kitsune .op-grain{display:none}
body.intro-active:not(.intro-handoff) .room,body.intro-active:not(.intro-handoff) .topbar{visibility:hidden}
.op-kitsune .op-title{position:relative}
.op-kitsune .op-title:before{content:"";position:absolute;inset:-10vh -14vw;z-index:-1;background:radial-gradient(closest-side,rgba(4,5,14,.78),rgba(4,5,14,.42) 60%,rgba(4,5,14,0));pointer-events:none}
.op-kitsune .op-word-big{color:#f6ead0}
.op-kitsune .op-word-big span{text-shadow:0 0 40px rgba(255,170,90,.18),0 14px 60px #000}
.op-kitsune .op-story{background:linear-gradient(180deg,rgba(4,5,12,0) 0,rgba(4,5,12,.86) 36%,rgba(4,5,12,.96) 100%)}
.op-flyer{width:clamp(170px,min(30cqw,calc((100cqh - var(--story-h,240px)) * .6)),360px)}
.op-flyer .op-evidence-card img{aspect-ratio:832/1216}
.op-kitsune[data-scene="beat-2"] .op-flyer .op-evidence-float{animation:flyer-drift 1.7s cubic-bezier(.16,.84,.3,1) both,op-float 5s ease-in-out 1.7s infinite}
.op-gate-frame{position:absolute;left:0;top:0;width:100%;height:100%;box-sizing:border-box;border:2px solid #c9a24b;box-shadow:inset 0 0 0 3px #120d0a,inset 0 0 0 4px rgba(201,162,75,.45),0 0 60px rgba(255,170,90,.25);opacity:0;pointer-events:none}
/* The hand-off: gather (every gate slides into one), draw in (that gate is
   pulled into the folded rail), cool (vermilion to lacquer; the far light
   settles into the power button). */
.op.is-gathering>.op-head,.op.is-gathering>.op-title,.op.is-gathering>.op-story,.op.is-gathering>.op-grain{opacity:0;pointer-events:none;transition:opacity .4s ease}
.op.is-gathering .op-flyer .op-evidence-float{animation:flyer-hold 1.2s ease-in-out both}
.op-gatehouse:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse 34% 46% at 50% 50%,rgba(255,226,170,.55),rgba(255,160,80,.18) 45%,rgba(255,140,60,0) 70%)}
.op.is-locked .op-gatehouse:after{animation:gate-lock .7s ease-out both}
.op.is-collapsing{background:transparent;transition:background .5s ease}
.op.is-collapsing>:not(.op-gatehouse){opacity:0!important;pointer-events:none;transition:opacity .3s ease}
/* The power button: hidden at the foot of the rail during the hand-off, then it
   rises, trailing a soft light, and settles into the centre with a slow glow. */
.terminal-panel.is-docking .rail-power{opacity:0;transform:translateY(var(--rise,320px)) scale(.8);animation:none}
.terminal-panel.is-docking .rail-power:before{animation:none}
.terminal-panel.is-rising .rail-power{animation:power-rise 1.35s both,power-glow 1.4s ease-out 1s both}
.terminal-panel.is-rising .rail-power:after{content:"";position:absolute;left:50%;top:50%;z-index:-1;width:4px;height:90px;margin-left:-2px;border-radius:4px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,170,100,.7),rgba(239,122,99,0));animation:power-trail 1.35s ease-out both}
@media(min-width:941px){
  /* The label sits at the top of the folded rail, so the button can rest in its exact centre. */
  .room.terminal-collapsed .terminal-rail .rail-label{position:absolute;top:26px;left:50%;margin-left:-6px}
}
@keyframes power-rise{
  0%{opacity:0;transform:translateY(var(--rise,320px)) scale(.8);animation-timing-function:cubic-bezier(.4,0,.2,1)}
  22%{opacity:1}
  70%{transform:translateY(-8px) scale(1.03);animation-timing-function:cubic-bezier(.45,0,.35,1)}
  100%{opacity:1;transform:none}}
@keyframes power-trail{0%{opacity:0;transform:scaleY(.4)}25%{opacity:1;transform:scaleY(1)}75%{opacity:.5}100%{opacity:0;transform:scaleY(.2)}}
@keyframes power-glow{0%{box-shadow:0 0 0 3px rgba(0,0,0,.55),0 0 18px rgba(226,35,26,.3)}40%{box-shadow:0 0 0 3px rgba(0,0,0,.55),0 0 34px 8px rgba(255,170,90,.5)}100%{box-shadow:0 0 0 3px rgba(0,0,0,.55),0 0 18px rgba(226,35,26,.3)}}
@keyframes flyer-hold{50%{scale:1.04}}
@keyframes gate-lock{0%{opacity:0}25%{opacity:1}100%{opacity:0}}

/* The closing lines drift on over the slow gates. */
.outro-tunnel{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:.5}
.outro-sky:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 62% 52% at 50% 46%,rgba(4,5,12,.86),rgba(4,5,12,.55) 62%,rgba(4,5,12,.2))}
.op-outro .outro-case{color:#ef7a63;text-shadow:0 2px 18px #000}

/* The closing's last search */
.cine-map.is-search{inset:0;display:grid;place-items:center;opacity:1;transform:none;-webkit-mask:none;mask:none}
.cine-search{width:min(660px,88vw);padding:34px 36px 30px;border-radius:18px;background:#fbf6ea;box-shadow:0 40px 110px rgba(0,0,0,.65),0 0 0 2px #c9a24b;text-align:center;animation:cine-search-in .8s cubic-bezier(.2,.8,.2,1) both}
.cine-search-logo{margin:0 0 20px;font:900 48px/1 var(--display,"Playfair",Georgia,serif)}
.cine-search-box{display:flex;align-items:center;min-height:50px;margin:0;padding:0 20px;border:1px solid #d6c8a6;border-radius:999px;background:#fff;color:#1d1814;font:500 16px/1.3 "JetBrains Mono",monospace;text-align:left;overflow-wrap:anywhere}
.cine-search-caret{display:inline-block;width:2px;height:1.1em;margin-left:2px;background:#c8372d;animation:caret-blink .9s steps(1) infinite}
.cine-none{margin:18px 0 0;color:#4b4036;font:500 15px/1.5 "Inter",sans-serif;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.cine-none.is-in{opacity:1;transform:none}
.cine-none b{font-family:"JetBrains Mono",monospace;font-weight:600;color:#1d1814}

@keyframes sg-letter{from{opacity:0;transform:translateY(.4em) scale(.8)}}
@keyframes sg-seal{from{opacity:0;transform:rotate(-30deg) scale(1.8)}}
@keyframes flyer-drift{0%{opacity:0;transform:translate(-40px,-75vh) rotate(-26deg) scale(.55)}55%{opacity:1;transform:translate(18px,-3vh) rotate(7deg) scale(.98)}78%{transform:translate(-6px,1vh) rotate(-2deg)}100%{transform:none}}
@keyframes cine-search-in{from{opacity:0;transform:translateY(30px) scale(.94)}}

@media(prefers-reduced-motion:reduce){
  .sg-logo span,.sg-trick.is-suggested .sg-try,.cine-search,.terminal-panel.is-rising .rail-power,.terminal-panel.is-rising .rail-power:after{animation:none}
  .op-kitsune[data-scene="beat-2"] .op-flyer .op-evidence-float{animation:none}
}

/* ---- The exhibits ------------------------------------------------------------------
   Each card's evidence is a real object with a back that differs from its front: a
   thermal printout of the forum post (an index card clipped behind it), the manila
   folder with its printed listing (a stamp and a sticky note on the back), Pixel &
   Paper's business card (a handwritten back), and photo prints (tape and pen on the
   back). Sizes follow the object's width, so zooming in makes the fine print readable. */
.viewer-object[data-kind="post"]{--ot:1.5px!important}
.viewer-object[data-kind="folder"]{--ot:2.5px!important}
.viewer-object[data-kind="card"]{--ot:3px!important}
.viewer-object[data-kind="post"] .obj-edge,.viewer-object[data-kind="photo"] .obj-edge{background:#e6e4dc}
.viewer-object[data-kind="folder"] .obj-edge{background:#c7a565}
.viewer-object[data-kind="card"] .obj-edge{background:#e9e3d6}
.viewer-object[data-kind="folder"] .obj-face:after{clip-path:inset(10% 0 0 0)}
/* The folder's outline starts below its tab: no edge above the body. */
.viewer-object[data-kind="folder"] .obj-edge-t{display:none}
.viewer-object[data-kind="folder"] .obj-edge-l,.viewer-object[data-kind="folder"] .obj-edge-r{top:9%;height:91%}
.pen-note{font:600 1.5em/1 "Caveat","Segoe Print",cursive;color:#c2302a;white-space:nowrap}
.hanko{position:absolute;width:26%;aspect-ratio:1;opacity:.9;mix-blend-mode:multiply;pointer-events:none}
.note-kicker{color:#a23a30;font:700 .62em/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.note-title{font:700 1.55em/1.02 "Caveat","Segoe Print",cursive}
.note-text{font:500 1.24em/1.24 "Caveat","Segoe Print",cursive}

/* The thread: a thermal printout, black print with a highlighter and a red pen on it. */
.obj-post,.obj-post-back{position:absolute;inset:0;background:url(images/cardstock.jpg) 0 0/170px,#f5f5f1;background-blend-mode:multiply}
.obj-post{display:flex;flex-direction:column;gap:.48em;padding:7% 8% 10%;color:#2e2e31;font:500 calc(var(--ow,240) * .047px)/1.34 var(--mono);
  box-shadow:inset 0 .9em 1.2em -1em rgba(0,0,0,.25),inset 0 -1.6em 1.6em -1.6em rgba(0,0,0,.12)}
.post-head{display:flex;justify-content:space-between;gap:1em;padding-bottom:.45em;border-bottom:1px dashed rgba(40,40,40,.4);color:#77777a;font-size:.78em}
.post-board{color:#5d5d60;font-size:.78em;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.post-thread{font:700 1.14em/1.2 var(--mono)}
.post-who{display:flex;align-items:center;gap:.5em;padding:.35em 0;border-top:1px solid rgba(40,40,40,.25);border-bottom:1px solid rgba(40,40,40,.25)}
.post-fox{flex:none;width:2.3em;height:2.3em;fill:#3b3b3e}
.post-fox rect{fill:#d9d9d4}
.post-fox .fox-light{fill:#f3f3ef}
.post-who b{font-size:1.18em}
.post-id{display:grid;justify-items:start;gap:.15em;min-width:0}
.post-when{position:relative;padding:0 .25em;color:#4a4a4d;font-size:.82em;white-space:nowrap}
.pen-ring{position:absolute;left:-9%;top:-45%;width:118%;height:190%;overflow:visible;fill:none;stroke:#c2302a;stroke-width:1.7;stroke-linecap:round}
.pen-ring path{vector-effect:non-scaling-stroke}
.post-line mark{color:inherit;background:linear-gradient(176deg,rgba(255,226,64,0) 10%,rgba(255,226,64,.82) 14% 86%,rgba(255,226,64,0) 90%);padding:0 .12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.post-note{align-self:flex-end;margin:-.15em .2em 0 0;transform:rotate(-5deg)}
.post-note:before{content:"\2191  "}
.post-foot{margin-top:auto;color:#8b8b8e;font-size:.72em;letter-spacing:.14em;text-align:center;text-transform:uppercase}
.obj-post-back{background:url(images/cardstock.jpg) 0 0/170px,#ecece6}
.index-card{position:absolute;left:8%;right:7%;top:12%;bottom:15%;display:flex;flex-direction:column;gap:.4em;padding:12% 9% 9%;transform:rotate(-2.4deg);color:#24387a;
  font-size:calc(var(--ow,240) * .058px);
  background:repeating-linear-gradient(180deg,rgba(70,110,170,0) 0 1.53em,rgba(70,110,170,.3) 1.53em calc(1.53em + 1px)) 0 4.2em/100% 100% no-repeat,url(images/cardstock.jpg) 0 0/150px,#fbf7e9;
  background-blend-mode:normal,multiply,normal;box-shadow:0 1px 2px rgba(0,0,0,.2),0 .6em 1.2em rgba(0,0,0,.12)}
.index-card .note-title{color:#1c2b63}
.index-card .note-kicker{margin:0 -10.5% .25em;padding:0 10.5% .55em;border-bottom:1.5px solid #df5a4e}
.index-card .hanko{right:4%;bottom:3%;width:32%}
.paper-clip{position:absolute;left:17%;top:6%;width:7%;height:20%;overflow:visible;fill:none;stroke:#8d9298;stroke-width:2.4;stroke-linecap:round;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));transform:rotate(-6deg)}

/* The folder: a manila folder, its printed "Index of" listing sliding out of it. */
.obj-folder,.obj-folder-back{position:absolute;inset:0;font-size:calc(var(--ow,240) * .045px)}
.folder-tab,.folder-body,.folder-front{position:absolute;background:url(images/manila.jpg) 0 0/200px,#e2c68e}
.folder-tab{left:5%;top:0;width:50%;height:12%;border-radius:.6em .9em 0 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.folder-body{left:0;right:0;top:9%;bottom:0;border-radius:0 3px 3px 3px;box-shadow:inset 0 0 0 1px rgba(90,60,20,.18),inset 0 -1.5em 2em -1.5em rgba(70,45,10,.2)}
.folder-label{position:absolute;left:8%;top:18%;padding:.18em .5em;white-space:nowrap;font-size:.92em!important;border:1px solid rgba(0,0,0,.12);border-radius:2px;background:#fbfaf5;color:#1d1814;font:700 1em/1.25 var(--mono);box-shadow:0 1px 1px rgba(0,0,0,.12)}
.folder-sheet{position:absolute;left:6%;right:5%;top:7%;bottom:24%;display:flex;flex-direction:column;gap:.36em;padding:6% 5.5%;transform:rotate(1.3deg);color:#1d1d1f;
  background:url(images/cardstock.jpg) 0 0/160px,#fcfcfa;background-blend-mode:multiply;font:500 .7em/1.25 var(--mono);box-shadow:0 1px 2px rgba(0,0,0,.18),0 .5em 1em rgba(0,0,0,.1)}
.dir-title{margin-bottom:.25em;font:700 1.85em/1.1 var(--display)}
.dir-row{display:grid;grid-template-columns:1fr auto 2.6em;gap:.7em;padding-bottom:.18em;border-bottom:1px solid rgba(0,0,0,.08);white-space:nowrap}
.dir-row span:last-child{text-align:right}
.dir-headrow{color:#555;font-weight:700}
.dir-name{color:#2347a8;text-decoration:underline;text-underline-offset:.15em}
.is-private .dir-name{text-decoration:underline wavy #c2302a;text-decoration-thickness:.09em}
.dir-note{align-self:flex-end;margin-top:.1em;font-size:2em;transform:rotate(-4deg)}
.dir-note:before{content:"\2196  "}
.dir-foot{margin-top:auto;color:#77777a;font-style:italic;font-size:.9em}
.folder-front{left:0;right:0;top:63%;bottom:0;border-radius:0 0 3px 3px;filter:brightness(1.04);
  -webkit-mask:radial-gradient(circle at 50% 0,transparent 1.7em,#000 1.75em);mask:radial-gradient(circle at 50% 0,transparent 1.7em,#000 1.75em);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(90,60,20,.16)}
.exhibit-label{position:absolute;left:7%;bottom:14%;padding:.3em .7em;background:#fbfaf5;color:#5a4a30;font:700 .85em/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 1px 1px rgba(0,0,0,.14)}
.obj-folder-back .folder-tab{left:auto;right:5%}
.obj-folder-back .folder-body{filter:brightness(.97)}
.stamp-open{position:absolute;left:9%;top:17%;padding:.35em .65em;border:.2em double #c2302a;border-radius:.3em;color:#c2302a;font:800 1.32em/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transform:rotate(-7deg);opacity:.86;mix-blend-mode:multiply}
.sticky-note{position:absolute;left:7%;right:29%;bottom:7%;display:flex;flex-direction:column;gap:.3em;padding:8% 7% 9%;transform:rotate(2.2deg);color:#2a2a35;
  background:url(images/cardstock.jpg) 0 0/140px,#f6e27c;background-blend-mode:multiply;font-size:1.06em;box-shadow:0 1px 2px rgba(0,0,0,.18),0 .7em 1.2em -.4em rgba(0,0,0,.25)}
.obj-folder-back .hanko{right:5%;bottom:13%;width:22%}
.obj-folder-back > .note-kicker{position:absolute;right:6%;bottom:4%;color:#7a5e2c}

/* The business card: Pixel & Paper's, with a handwritten back. */
.obj-bizcard,.obj-bizcard-back{position:absolute;inset:0;font-size:calc(var(--ow,240) * .05px);color:#1f2430;background:url(images/cardstock.jpg) 0 0/150px,#fbf8f1;background-blend-mode:multiply}
.obj-bizcard{display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr auto;align-items:start;gap:0 6%;padding:9% 9% 8%}
.pixel-logo{width:3.1em;height:3.1em;fill:#1f2430}
.pixel-logo .logo-accent{fill:#e0634e}
.pixel-logo .logo-fold{fill:#c9cdd6}
.pixel-logo .logo-crease{fill:#8f96a5}
.biz-brand{display:grid;gap:.25em}
.biz-brand strong{font:700 1.55em/1 var(--display)}
.biz-brand span{color:#646b78;font:500 .72em/1.2 var(--ui)}
.biz-person{grid-column:1/-1;display:flex;align-items:flex-end;justify-content:space-between;gap:1em;padding-top:.6em;border-top:1.5px solid #e0634e}
.biz-person > span:first-child{display:grid;gap:.15em}
.biz-person strong{font:800 1.08em/1.1 var(--ui)}
.biz-person > span:first-child span{color:#646b78;font:500 .72em/1.2 var(--ui);white-space:nowrap}
.biz-url{color:#1f2430;font:600 .7em/1.2 var(--mono)}
.obj-bizcard-back{display:grid;grid-template-columns:27% 1fr}
.biz-band{display:grid;place-items:center;background:#1f2430}
.biz-band .pixel-logo{fill:#f4efe3;width:2.6em;height:2.6em}
.ink-note{display:flex;flex-direction:column;justify-content:center;gap:.3em;padding:8% 8% 7% 9%;color:#26397c}
.ink-note .note-title{color:#1b2a66}
.obj-bizcard-back .note-kicker{font-size:.5em}
.obj-bizcard-back .note-title{font-size:1.28em}
.obj-bizcard-back .note-text{font-size:.92em}
.obj-bizcard-back .hanko{right:4%;top:7%;width:15%}

/* A photo print's back: plain photo paper, two strips of tape and a pen note. */
.obj-photo-back{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:14% 10% 18%;font-size:calc(var(--ow,240) * .064px);
  background:repeating-linear-gradient(-32deg,rgba(60,70,90,0) 0 2.6em,rgba(60,70,90,.045) 2.6em 2.75em),url(images/cardstock.jpg) 0 0/170px,#f2f1ec;background-blend-mode:normal,multiply,normal}
.tape{position:absolute;top:-1.5%;width:34%;height:8%;background:rgba(232,219,182,.82);box-shadow:0 1px 1px rgba(0,0,0,.08);mix-blend-mode:multiply;
  clip-path:polygon(0 8%,4% 0,9% 10%,14% 0,100% 0,96% 12%,100% 26%,95% 44%,100% 62%,96% 80%,100% 100%,0 100%,4% 84%,0 66%,5% 48%,0 30%)}
.tape-l{left:4%;transform:rotate(-9deg)}
.tape-r{right:4%;transform:rotate(8deg)}
.obj-photo-back .ink-note{padding:0}
.obj-photo-back .hanko{right:7%;bottom:5%;width:27%}