/* floor.css — the room: carpet, lamp pool, the objects on it, and the zoom modal
 * that opens when one is picked up. Extracted verbatim from the prototype.
 */
/* PASS 13 — the composition.
 *
 * Measured, because the difference was not a matter of taste: at 390px the floor ran at 64.7%
 * object density with 7 overlapping pairs, and at 1440px the SAME percentages produced 12.8%
 * density and zero overlaps. The cause was the floor being 175vmin — 1575px tall on a desktop
 * — while every object stayed the size it was on a phone. The objects did not spread out
 * because they were badly placed; they spread out because the room grew and they did not.
 *
 * So: the room is shorter, the objects are larger and scaled unequally, and they are pushed
 * into a pile around the notebook with deliberate overlap. Some sit under it, some on top of
 * it. Shadow depth varies with how near the object reads — a thing lying flat on carpet has a
 * tight dark shadow, a thing on top of other things throws a longer one.
 */
#floor{
  position:relative;width:100%;min-height:100vh;max-height:1040px;
  background:
    radial-gradient(ellipse 62vmax 48vmax at 50% 34%, var(--carpet-lit) 0%, var(--carpet) 46%, #40323B 72%, #241A20 100%);
  overflow:hidden;
}
/* carpet pile */
#floor::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(rgba(255,235,220,.13) 1px, transparent 1.5px),
    radial-gradient(rgba(20,8,14,.35) 1px, transparent 1.5px);
  background-size:4px 4px,6px 6px;background-position:0 0,2px 3px;
}
/* lamp vignette flicker-less pool */
#floor::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 50vmax 40vmax at 50% 32%, rgba(244,223,192,.16), transparent 60%);
}
.room-note{
  position:absolute;top:26px;left:50%;transform:translateX(-50%) rotate(-1deg);z-index:3;
  font-family:'Reenie Beanie',cursive;font-size:clamp(1.25rem,3vw,1.6rem);
  color:#E9D8C2;text-align:center;line-height:1.25;opacity:.9;text-shadow:0 2px 6px rgba(0,0,0,.6);
  pointer-events:none;
}
.room-note em{font-style:normal;color:#F3B7CF;}

/* ------- generic floor object ------- */
.obj{
  position:absolute;z-index:2;cursor:pointer;user-select:none;-webkit-user-select:none;
  filter:drop-shadow(0 10px 12px var(--shadow));
  transition:transform .18s ease, filter .18s ease;
}
.obj:hover{transform:var(--r,rotate(0)) translateY(-4px) scale(1.03);filter:drop-shadow(0 16px 16px var(--shadow));}
.obj:focus-visible{filter:drop-shadow(0 0 5px var(--lamp)) drop-shadow(0 14px 16px var(--shadow));}
.obj:active{filter:drop-shadow(0 5px 7px var(--shadow));}
#diary:hover{transform:var(--r);} /* the tilt+lift happen on .diary-body instead */

/* THE DIARY (closed, on floor) — the thing everything else is piled around */
/* The diary's own box is untransformed and un-positioned in z — only its INNER body carries
 * the tilt. That matters: a transform creates a stacking context, and while the tilt was on
 * #diary the lock inside it could never be painted above a sibling object no matter what
 * z-index it was given. With the transform moved inward, .d-lock competes with the other
 * floor objects directly and can simply be told to sit on top. */
#diary{left:47%;top:19%;transform:translateX(-50%);--r:translateX(-50%);width:min(320px,58vw);aspect-ratio:3/4;z-index:2;}
.diary-body{position:absolute;inset:0;transform:rotate(-7deg);transform-origin:50% 50%;}
#diary:hover .diary-body{transform:rotate(-7deg) translateY(-4px) scale(1.03);transition:transform .18s ease;}
.diary-cover{
  position:absolute;inset:0;border-radius:10px 16px 16px 10px;
  background:
    radial-gradient(circle at 28% 22%, #E170A6 0%, transparent 44%),
    radial-gradient(circle at 78% 74%, #A63C72 0%, transparent 52%),
    linear-gradient(135deg,#C9538D,#8E2F60);
  box-shadow:0 22px 34px var(--shadow), inset -12px 0 20px rgba(60,8,36,.5), inset 0 0 0 2px rgba(255,255,255,.08);
}
.diary-cover::before{ /* worn fuzz
  * Was two radial-gradients at 5px and 8px — a lattice. On a fuzzy cover that reads as
  * upholstery weave, and it is the same tiled-repeat problem `.grained` had: the eye finds the
  * spacing immediately. This is two turbulence fields at different frequencies instead, so the
  * pile clumps and thins the way worn fuzz actually does and there is no period to lock onto. */
  content:"";position:absolute;inset:0;border-radius:inherit;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20300%20400%27%3E%20%3Cdefs%3E%20%3Cfilter%20id%3D%27f1%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%20%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.55%27%20numOctaves%3D%274%27%20seed%3D%275%27%20result%3D%27n%27%2F%3E%20%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%20in%3D%27n%27%20result%3D%27g%27%2F%3E%20%3CfeComponentTransfer%20in%3D%27g%27%3E%20%3CfeFuncR%20type%3D%27table%27%20tableValues%3D%270%200%20.25%201%201%27%2F%3E%20%3CfeFuncG%20type%3D%27table%27%20tableValues%3D%270%200%20.25%201%201%27%2F%3E%20%3CfeFuncB%20type%3D%27table%27%20tableValues%3D%270%200%20.25%201%201%27%2F%3E%20%3CfeFuncA%20type%3D%27table%27%20tableValues%3D%270%20.55%20.9%201%27%2F%3E%20%3C%2FfeComponentTransfer%3E%20%3C%2Ffilter%3E%20%3Cfilter%20id%3D%27f2%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%20%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.13%27%20numOctaves%3D%273%27%20seed%3D%2723%27%20result%3D%27m%27%2F%3E%20%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%20in%3D%27m%27%2F%3E%20%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27table%27%20tableValues%3D%270%20.4%20.75%27%2F%3E%3C%2FfeComponentTransfer%3E%20%3C%2Ffilter%3E%20%3C%2Fdefs%3E%20%3Crect%20width%3D%27300%27%20height%3D%27400%27%20filter%3D%27url%28%23f2%29%27%20opacity%3D%27.5%27%2F%3E%20%3Crect%20width%3D%27300%27%20height%3D%27400%27%20filter%3D%27url%28%23f1%29%27%2F%3E%20%3C%2Fsvg%3E");
  background-size:100% 100%;background-repeat:no-repeat;
  opacity:.34;
}
/* a second, coarser pass at a different scale and rotation so even the SVG doesn't read as one
 * field. This lives on .diary-body, NOT on .diary-cover::after — that pseudo-element is already
 * the grime patch and redefining it would silently eat it. */
.diary-body::after{
  content:"";position:absolute;inset:0;border-radius:10px 16px 16px 10px;mix-blend-mode:overlay;
  /* must NOT spill past the cover — a negative inset here put a grey field on the carpet */
  background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20300%20400%27%3E%20%3Cdefs%3E%20%3Cfilter%20id%3D%27f1%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%20%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.55%27%20numOctaves%3D%274%27%20seed%3D%275%27%20result%3D%27n%27%2F%3E%20%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%20in%3D%27n%27%20result%3D%27g%27%2F%3E%20%3CfeComponentTransfer%20in%3D%27g%27%3E%20%3CfeFuncR%20type%3D%27table%27%20tableValues%3D%270%200%20.25%201%201%27%2F%3E%20%3CfeFuncG%20type%3D%27table%27%20tableValues%3D%270%200%20.25%201%201%27%2F%3E%20%3CfeFuncB%20type%3D%27table%27%20tableValues%3D%270%200%20.25%201%201%27%2F%3E%20%3CfeFuncA%20type%3D%27table%27%20tableValues%3D%270%20.55%20.9%201%27%2F%3E%20%3C%2FfeComponentTransfer%3E%20%3C%2Ffilter%3E%20%3Cfilter%20id%3D%27f2%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%20%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.13%27%20numOctaves%3D%273%27%20seed%3D%2723%27%20result%3D%27m%27%2F%3E%20%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%20in%3D%27m%27%2F%3E%20%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27table%27%20tableValues%3D%270%20.4%20.75%27%2F%3E%3C%2FfeComponentTransfer%3E%20%3C%2Ffilter%3E%20%3C%2Fdefs%3E%20%3Crect%20width%3D%27300%27%20height%3D%27400%27%20filter%3D%27url%28%23f2%29%27%20opacity%3D%27.5%27%2F%3E%20%3Crect%20width%3D%27300%27%20height%3D%27400%27%20filter%3D%27url%28%23f1%29%27%2F%3E%20%3C%2Fsvg%3E");
  background-size:100% 100%;background-repeat:no-repeat;
  transform:rotate(180deg);opacity:.22;
}
.diary-cover::after{ /* grime patch */
  content:"";position:absolute;right:8%;bottom:10%;width:34%;height:20%;border-radius:50%;
  background:radial-gradient(ellipse, rgba(30,8,20,.4), transparent 70%);
}
.diary-title{
  position:absolute;top:8.5%;left:0;right:8%;text-align:center;pointer-events:none;
  font-family:'Gochi Hand',cursive;font-size:clamp(1.8rem,6vw,2.4rem);color:#F7D4E6;
  text-shadow:0 2px 0 rgba(70,5,40,.7);transform:rotate(-2deg);
}
.diary-title small{display:block;font-family:'Reenie Beanie',cursive;font-size:1.1rem;letter-spacing:.1em;color:#EDB9D3;}
.d-strip{
  position:absolute;font-family:'VT323',monospace;letter-spacing:.2em;font-size:.95rem;
  background:#141016;color:#EDE7D6;padding:2px 10px 1px;box-shadow:0 2px 4px rgba(0,0,0,.5);
  pointer-events:none;white-space:nowrap;
}
.ds1{top:67%;left:10%;transform:rotate(-4deg);}
.ds2{top:77%;left:19%;transform:rotate(2deg);}
/* PASS 12 — the lock.
 *
 * This is the object the entire entry sequence is about: you click it four times, it insults
 * you, and then it gives. It was two circles and a rotated square with a flat gradient — the
 * cheapest thing on the floor, and the one that had to carry the most.
 *
 * It is now a real cheap-diary padlock, drawn as one SVG: a bevelled heart body with a proper
 * keyhole, a shackle that reads as a separate piece of metal seated into it, a specular run
 * down the left lobe, scratches in both directions, and tarnish in the low corner. Cheap
 * plated metal, not jewellery — it is a lock that a fourteen-year-old was sold, and it does
 * not work.
 */
.d-lock{
  /* positioned against the floor, tracking the notebook's right edge and mid-height.
     #diary is left:47% with translateX(-50%), so its right edge is 47% + half its width. */
  position:absolute;
  /* the strap runs back INTO the notebook's right edge, so the element extends left from it */
  /* right edge sits exactly on the notebook's fore-edge — the strap must not cross onto carpet */
  left:calc(47% + min(320px, 58vw) / 2 - 182px);
  top:calc(19% + (min(320px, 58vw) * 4 / 3) * 0.315);
  width:182px;height:129px;
  transform:rotate(-6deg);transform-origin:88% 24%;
  pointer-events:none;z-index:6;
  filter:drop-shadow(2px 5px 5px rgba(8,3,6,.62));
}
.d-shackle{display:none;}
.d-heart{
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20186%20132%27%3E%20%3Cdefs%3E%20%3ClinearGradient%20id%3D%27strap%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%3E%20%3Cstop%20offset%3D%270%25%27%20stop-color%3D%27%238E2F60%27%2F%3E%3Cstop%20offset%3D%2716%25%27%20stop-color%3D%27%23C9538D%27%2F%3E%20%3Cstop%20offset%3D%2752%25%27%20stop-color%3D%27%23A63C72%27%2F%3E%3Cstop%20offset%3D%2784%25%27%20stop-color%3D%27%237A2452%27%2F%3E%20%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%235E1B3F%27%2F%3E%3C%2FlinearGradient%3E%20%3ClinearGradient%20id%3D%27intoEdge%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%270%27%3E%20%3Cstop%20offset%3D%270%25%27%20stop-color%3D%27%233A0E28%27%20stop-opacity%3D%270%27%2F%3E%20%3Cstop%20offset%3D%2740%25%27%20stop-color%3D%27%23360C25%27%20stop-opacity%3D%27.42%27%2F%3E%20%3Cstop%20offset%3D%2774%25%27%20stop-color%3D%27%2322071A%27%20stop-opacity%3D%27.82%27%2F%3E%20%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%23140410%27%20stop-opacity%3D%27.97%27%2F%3E%3C%2FlinearGradient%3E%20%3ClinearGradient%20id%3D%27steel%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%271%27%3E%20%3Cstop%20offset%3D%270%25%27%20stop-color%3D%27%23F4F5F8%27%2F%3E%3Cstop%20offset%3D%2718%25%27%20stop-color%3D%27%23D6D9E2%27%2F%3E%20%3Cstop%20offset%3D%2742%25%27%20stop-color%3D%27%239EA3B4%27%2F%3E%3Cstop%20offset%3D%2758%25%27%20stop-color%3D%27%23C6CAD6%27%2F%3E%20%3Cstop%20offset%3D%2778%25%27%20stop-color%3D%27%237C8296%27%2F%3E%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%235E6478%27%2F%3E%3C%2FlinearGradient%3E%20%3ClinearGradient%20id%3D%27shk%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%270%27%3E%20%3Cstop%20offset%3D%270%25%27%20stop-color%3D%27%236E7488%27%2F%3E%3Cstop%20offset%3D%2722%25%27%20stop-color%3D%27%23E2E5EE%27%2F%3E%20%3Cstop%20offset%3D%2750%25%27%20stop-color%3D%27%23A9AEBF%27%2F%3E%3Cstop%20offset%3D%2778%25%27%20stop-color%3D%27%23D2D6E0%27%2F%3E%20%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%23666C80%27%2F%3E%3C%2FlinearGradient%3E%20%3ClinearGradient%20id%3D%27clasp%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%3E%20%3Cstop%20offset%3D%270%25%27%20stop-color%3D%27%23EDEFF5%27%2F%3E%3Cstop%20offset%3D%2740%25%27%20stop-color%3D%27%23AEB3C3%27%2F%3E%20%3Cstop%20offset%3D%2772%25%27%20stop-color%3D%27%237E8498%27%2F%3E%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%23B9BECD%27%2F%3E%3C%2FlinearGradient%3E%20%3CradialGradient%20id%3D%27tarn%27%20cx%3D%2768%25%27%20cy%3D%2774%25%27%20r%3D%2758%25%27%3E%20%3Cstop%20offset%3D%270%25%27%20stop-color%3D%27%234A4030%27%20stop-opacity%3D%27.34%27%2F%3E%20%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%234A4030%27%20stop-opacity%3D%270%27%2F%3E%3C%2FradialGradient%3E%20%3Cfilter%20id%3D%27sft%27%3E%3CfeGaussianBlur%20stdDeviation%3D%27.5%27%2F%3E%3C%2Ffilter%3E%20%3C%2Fdefs%3E%20%3C%21--%20strap%3A%20terminates%20AT%20the%20fore-edge%20%28x%3D186%29.%20the%20last%20third%20is%20the%20edge%20shadow%20it%20rolls%20into.%20--%3E%20%3Cpath%20d%3D%27M62%2030%20L186%2027%20L186%2061%20L62%2058%20Z%27%20fill%3D%27%2340122C%27%20opacity%3D%27.5%27%20transform%3D%27translate%282%2C4%29%27%2F%3E%20%3Cpath%20d%3D%27M62%2030%20L186%2027%20L186%2061%20L62%2058%20Z%27%20fill%3D%27url%28%23strap%29%27%2F%3E%20%3Cpath%20d%3D%27M64%2036%20L182%2033%27%20stroke%3D%27%23E8A7C6%27%20stroke-width%3D%271.1%27%20opacity%3D%27.34%27%20stroke-dasharray%3D%275%204%27%2F%3E%20%3Cpath%20d%3D%27M64%2052%20L182%2049%27%20stroke%3D%27%233E0F2A%27%20stroke-width%3D%271.1%27%20opacity%3D%27.42%27%20stroke-dasharray%3D%275%204%27%2F%3E%20%3Cpath%20d%3D%27M120%2028%20L186%2026%20L186%2062%20L120%2060%20Z%27%20fill%3D%27url%28%23intoEdge%29%27%2F%3E%20%3Crect%20x%3D%2744%27%20y%3D%2724%27%20width%3D%2730%27%20height%3D%2740%27%20rx%3D%274%27%20fill%3D%27%233A3E4E%27%20opacity%3D%27.45%27%20transform%3D%27translate%282%2C3%29%27%2F%3E%20%3Crect%20x%3D%2744%27%20y%3D%2724%27%20width%3D%2730%27%20height%3D%2740%27%20rx%3D%274%27%20fill%3D%27url%28%23clasp%29%27%2F%3E%20%3Crect%20x%3D%2755%27%20y%3D%2731%27%20width%3D%278%27%20height%3D%2717%27%20rx%3D%274%27%20fill%3D%27%23191C26%27%2F%3E%20%3Crect%20x%3D%2746.5%27%20y%3D%2726.5%27%20width%3D%2725%27%20height%3D%277%27%20rx%3D%273%27%20fill%3D%27%23FFF%27%20opacity%3D%27.34%27%2F%3E%20%3Cpath%20d%3D%27M42%2062%20L42%2044%20A17%2017%200%200%201%2076%2044%20L76%2062%27%20fill%3D%27none%27%20stroke%3D%27%234C5165%27%20stroke-width%3D%2711%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.5%27%20transform%3D%27translate%281.5%2C2%29%27%2F%3E%20%3Cpath%20d%3D%27M42%2062%20L42%2044%20A17%2017%200%200%201%2076%2044%20L76%2062%27%20fill%3D%27none%27%20stroke%3D%27url%28%23shk%29%27%20stroke-width%3D%279%27%20stroke-linecap%3D%27round%27%2F%3E%20%3Cpath%20d%3D%27M45%2052%20L45%2045%20A13%2013%200%200%201%2059%2033%27%20fill%3D%27none%27%20stroke%3D%27%23FBFCFE%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.55%27%2F%3E%20%3Cpath%20d%3D%27M59%20126%20C59%20126%2017%2096%2017%2071%20C17%2055%2032%2047%2044%2053%20C51%2057%2056%2063%2059%2069%20C62%2063%2067%2057%2074%2053%20C86%2047%20101%2055%20101%2071%20C101%2096%2059%20126%2059%20126%20Z%27%20fill%3D%27%233A3E4E%27%20opacity%3D%27.5%27%20transform%3D%27translate%282%2C3%29%27%2F%3E%20%3Cpath%20d%3D%27M59%20126%20C59%20126%2017%2096%2017%2071%20C17%2055%2032%2047%2044%2053%20C51%2057%2056%2063%2059%2069%20C62%2063%2067%2057%2074%2053%20C86%2047%20101%2055%20101%2071%20C101%2096%2059%20126%2059%20126%20Z%27%20fill%3D%27url%28%23steel%29%27%2F%3E%20%3Cpath%20d%3D%27M59%20120%20C59%20120%2023%2094%2023%2072%20C23%2059%2035%2053%2045%2058%20C52%2062%2056%2068%2059%2074%27%20fill%3D%27none%27%20stroke%3D%27%23FFF%27%20stroke-width%3D%272.4%27%20opacity%3D%27.42%27%20filter%3D%27url%28%23sft%29%27%2F%3E%20%3Cellipse%20cx%3D%2759%27%20cy%3D%2784%27%20rx%3D%277.5%27%20ry%3D%277.5%27%20fill%3D%27%232C2F3C%27%2F%3E%20%3Cpath%20d%3D%27M55.6%2087%20L62.4%2087%20L60.6%20100%20L57.4%20100%20Z%27%20fill%3D%27%232C2F3C%27%2F%3E%20%3Cellipse%20cx%3D%2759%27%20cy%3D%2782.5%27%20rx%3D%274.6%27%20ry%3D%274.6%27%20fill%3D%27%2314161E%27%2F%3E%20%3Cpath%20d%3D%27M56.4%2086%20L61.6%2086%20L60.2%2097%20L57.8%2097%20Z%27%20fill%3D%27%2314161E%27%2F%3E%20%3Cellipse%20cx%3D%2757.4%27%20cy%3D%2781%27%20rx%3D%271.6%27%20ry%3D%271.6%27%20fill%3D%27%237A809A%27%20opacity%3D%27.55%27%2F%3E%20%3Cpath%20d%3D%27M35%2074%20L47%2082%27%20stroke%3D%27%23FDFEFF%27%20stroke-width%3D%27.8%27%20opacity%3D%27.4%27%2F%3E%20%3Cpath%20d%3D%27M71%2064%20L83%2070%27%20stroke%3D%27%23FDFEFF%27%20stroke-width%3D%27.7%27%20opacity%3D%27.3%27%2F%3E%20%3Cpath%20d%3D%27M43%2096%20L55%20106%27%20stroke%3D%27%233E4354%27%20stroke-width%3D%27.8%27%20opacity%3D%27.4%27%2F%3E%20%3Cpath%20d%3D%27M79%2086%20L69%2098%27%20stroke%3D%27%233E4354%27%20stroke-width%3D%27.7%27%20opacity%3D%27.3%27%2F%3E%20%3Cpath%20d%3D%27M59%20126%20C59%20126%2017%2096%2017%2071%20C17%2055%2032%2047%2044%2053%20C51%2057%2056%2063%2059%2069%20C62%2063%2067%2057%2074%2053%20C86%2047%20101%2055%20101%2071%20C101%2096%2059%20126%2059%20126%20Z%27%20fill%3D%27url%28%23tarn%29%27%2F%3E%20%3C%2Fsvg%3E");
  background-size:100% 100%;background-repeat:no-repeat;
}
/* it swings a little when you try it — reached as a sibling now */
#diary.shaking ~ .d-lock{animation:lockswing .42s ease;}
@keyframes lockswing{
  0%,100%{transform:rotate(-6deg);}
  35%{transform:rotate(-10.5deg);}
  70%{transform:rotate(-2.5deg);}
}
#diary.shaking .diary-body{animation:dshake .4s ease;}
@keyframes dshake{
  0%,100%{transform:rotate(-7deg) translateX(0);}
  25%{transform:rotate(-9deg) translateX(-8px);}
  55%{transform:rotate(-5deg) translateX(7px);}
  80%{transform:rotate(-8deg) translateX(-4px);}
}
#diary.snapped ~ .d-lock{animation:lockdrop .7s ease-in forwards;}
@keyframes lockdrop{to{transform:translateY(240px) rotate(120deg);opacity:0;}}
.diary-hint{
  position:absolute;top:-2.4em;left:50%;transform:translateX(-50%) rotate(-2deg);
  font-family:'Reenie Beanie',cursive;font-size:1.3rem;color:#F3D9C4;white-space:nowrap;
  text-shadow:0 2px 5px rgba(0,0,0,.7);opacity:0;transition:opacity .25s;pointer-events:none;
}
.diary-hint.show{opacity:1;}

/* --- the pile. nothing is evenly spaced and nothing is alone. --- */

/* CD-R — flat on the carpet, top left, its own tight shadow */
/* PASS 15 — not everything is lying flat.
 *
 * Every object sat at zero elevation with the same shadow under it, which reads as a collage of
 * cut-outs. Three of them are now off the plane, and their shadows say so: the further a thing
 * lifts, the longer and softer the shadow it throws, and the more it falls to one side.
 *
 * The CD is resting on the corner of something under it, so its far edge is up. */
#cd{left:17%;top:5%;
  --r:perspective(620px) rotateX(17deg) rotateZ(-12deg) scale(1.34);
  transform:perspective(620px) rotateX(17deg) rotateZ(-12deg) scale(1.34);
  width:120px;height:120px;z-index:1;
  filter:drop-shadow(-7px 20px 15px rgba(8,3,6,.66));}
.cd-disc{width:100%;height:100%;border-radius:50%;
  background:conic-gradient(#EBD9DD,#D9E6EA 70deg,#E8DDEE 140deg,#DDE8DC 210deg,#EEE6D5 290deg,#EBD9DD);
  box-shadow:inset 0 0 0 6px #DDD6C6, inset 0 0 0 7px #B7AE99, 0 8px 12px var(--shadow);position:relative;filter:saturate(.7);}
.cd-disc::after{content:"";position:absolute;inset:42px;border-radius:50%;background:var(--carpet-lit);box-shadow:inset 0 0 0 4px #B7AE99;}
.cd-label{position:absolute;top:26px;left:8px;right:8px;text-align:center;
  font-family:'Gochi Hand',cursive;font-size:.95rem;color:var(--sharpie);transform:rotate(-6deg);line-height:1.05;}

/* receipt — lying ACROSS the notebook's right edge, so it occludes it */
/* Thermal receipt paper never lies flat — it keeps the curl of the roll. It is tipped along its
 * long axis and shaded darker at the two ends, which is what a cup looks like from above. */
#receipt{left:62%;top:34%;
  --r:perspective(700px) rotateX(21deg) rotateY(-9deg) rotateZ(8deg) scale(1.5);
  transform:perspective(700px) rotateX(21deg) rotateY(-9deg) rotateZ(8deg) scale(1.5);
  width:120px;z-index:3;
  filter:drop-shadow(6px 22px 17px rgba(8,3,6,.58));}
#receipt .paperette{
  background-image:linear-gradient(179deg,
    rgba(72,48,22,.2) 0%, rgba(72,48,22,.03) 13%,
    rgba(255,252,238,.16) 46%,
    rgba(72,48,22,.05) 84%, rgba(72,48,22,.24) 100%);
}
#receipt .paperette{padding:10px 8px 14px;font-family:'Special Elite',monospace;font-size:.5rem;line-height:1.5;
  clip-path:polygon(0 2%,6% 0,14% 2%,22% 0,30% 3%,40% 0,50% 2%,60% 0,70% 3%,80% 0,90% 2%,100% 0,100% 98%,92% 100%,82% 97%,70% 100%,58% 97%,46% 100%,34% 97%,22% 100%,10% 97%,0 100%);}

/* folded note — half under the notebook's bottom corner */
#bnote{left:30%;top:62%;--r:rotate(-5deg) scale(1.48);transform:rotate(-5deg) scale(1.48);width:110px;height:82px;z-index:1;
  filter:drop-shadow(0 7px 8px rgba(8,3,6,.68));}
#bnote .paperette{width:100%;height:100%;background:linear-gradient(180deg,var(--paper) 49.6%,#DED4BB 49.6% 50.4%,var(--paper-dark) 50.4%);
  display:flex;align-items:center;justify-content:center;font-family:'Reenie Beanie',cursive;font-size:1.05rem;color:var(--pen);}

/* AIM printout — landed on top of the note, so it throws a longer shadow */
/* The printout landed across the folded note, so its right end is propped off the floor. */
#aim{left:17%;top:71%;
  --r:perspective(760px) rotateX(13deg) rotateY(11deg) rotateZ(4deg) scale(1.4);
  transform:perspective(760px) rotateX(13deg) rotateY(11deg) rotateZ(4deg) scale(1.4);
  width:180px;z-index:3;
  filter:drop-shadow(-9px 24px 18px rgba(8,3,6,.6));}
#aim .paperette{padding:12px 12px 16px;font-family:'VT323',monospace;font-size:.68rem;line-height:1.35;color:#2C2C33;
  background:linear-gradient(180deg,#F2EEE0, #E9E3D0);}
#aim .aim-head{font-size:.6rem;color:#8B8574;border-bottom:1px solid #C9C1A8;margin-bottom:4px;padding-bottom:2px;}

/* referral slip — underneath the AIM printout, only partly visible */
#slip{left:10%;top:44%;--r:rotate(-9deg) scale(1.36);transform:rotate(-9deg) scale(1.36);width:160px;z-index:1;
  filter:drop-shadow(0 6px 7px rgba(8,3,6,.7));}
#slip .paperette{padding:10px;background:#F6E8E6;font-family:'Special Elite',monospace;font-size:.55rem;line-height:1.5;color:#3A2C2C;}
#slip .slip-head{font-size:.6rem;letter-spacing:.08em;border-bottom:2px solid #B03A3A;color:#B03A3A;margin-bottom:4px;}

/* mapquest — across the notebook's bottom right */
#mapq{left:57%;top:69%;--r:rotate(6deg) scale(1.42);transform:rotate(6deg) scale(1.42);width:170px;z-index:3;
  filter:drop-shadow(4px 13px 12px rgba(8,3,6,.6));}
#mapq .paperette{padding:10px;font-family:'Nunito',sans-serif;font-size:.55rem;line-height:1.5;color:#333;background:#F4F1E4;}
#mapq .mq-bar{font-weight:800;font-size:.6rem;color:#fff;background:#3D5AA8;padding:2px 5px;margin:-10px -10px 6px;}

/* photobooth strip — leaning over the notebook's top right corner */
#booth{left:76%;top:10%;--r:rotate(14deg) scale(1.5);transform:rotate(14deg) scale(1.5);width:72px;z-index:3;
  filter:drop-shadow(5px 15px 14px rgba(8,3,6,.66));}
#booth .paperette{padding:6px;background:#141014;display:flex;flex-direction:column;gap:5px;}
/* the frames themselves — see PASS 8 note below at .art-booth */
.frame{
  position:relative;overflow:hidden;
  background-size:100% 100%;background-repeat:no-repeat;
  background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2096%2070%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cdefs%3E%3CradialGradient%20id%3D%27fl%27%20cx%3D%2736%25%27%20cy%3D%2734%25%27%20r%3D%2760%25%27%3E%20%3Cstop%20offset%3D%270%25%27%20stop-color%3D%27%23FFF8EC%27%2F%3E%3Cstop%20offset%3D%2722%25%27%20stop-color%3D%27%23F2DCC0%27%2F%3E%20%3Cstop%20offset%3D%2746%25%27%20stop-color%3D%27%23A89272%27%2F%3E%3Cstop%20offset%3D%2770%25%27%20stop-color%3D%27%235C5A42%27%2F%3E%20%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%23232A1C%27%2F%3E%3C%2FradialGradient%3E%20%3CradialGradient%20id%3D%27vig%27%20cx%3D%2736%25%27%20cy%3D%2734%25%27%20r%3D%2772%25%27%3E%20%3Cstop%20offset%3D%270%25%27%20stop-color%3D%27%23000%27%20stop-opacity%3D%270%27%2F%3E%3Cstop%20offset%3D%2758%25%27%20stop-color%3D%27%230C1209%27%20stop-opacity%3D%27.3%27%2F%3E%20%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%23080D06%27%20stop-opacity%3D%27.88%27%2F%3E%3C%2FradialGradient%3E%20%3Cfilter%20id%3D%27gr%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.5%27%20numOctaves%3D%274%27%20seed%3D%277%27%20result%3D%27n%27%2F%3E%20%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%27.18%27%20in%3D%27n%27%2F%3E%20%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27table%27%20tableValues%3D%270%20.6%201%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%20%3Cfilter%20id%3D%27sb%27%3E%3CfeGaussianBlur%20stdDeviation%3D%27.7%27%2F%3E%3C%2Ffilter%3E%20%3Cfilter%20id%3D%27sb2%27%3E%3CfeGaussianBlur%20stdDeviation%3D%271.5%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%20%3Crect%20width%3D%2796%27%20height%3D%2770%27%20fill%3D%27%23161B12%27%2F%3E%3Crect%20width%3D%2796%27%20height%3D%2770%27%20fill%3D%27%231D2417%27%20opacity%3D%27.5%27%2F%3E%20%3Cg%20filter%3D%27url%28%23sb%29%27%20transform%3D%27translate%2834%2C30%29%20scale%281%29%27%3E%3Cpath%20d%3D%27M-19%2070%20Q-17%2020%20-8%2012%20L9%2012%20Q18%2020%2020%2070%20Z%27%20fill%3D%27url%28%23fl%29%27%2F%3E%3Cpath%20d%3D%27M-14%2026%20Q-17%204%200%200%20Q17%204%2014%2026%20Q14%2034%200%2034%20Q-14%2034%20-14%2026%20Z%27%20fill%3D%27url%28%23fl%29%27%2F%3E%3Cpath%20d%3D%27M-15%208%20Q0%20-6%2015%208%20Q12%20-2%200%20-4%20Q-12%20-2%20-15%208%20Z%27%20fill%3D%27%231B2114%27%20opacity%3D%27.5%27%2F%3E%3C%2Fg%3E%3Cg%20filter%3D%27url%28%23sb%29%27%20transform%3D%27translate%2866%2C38%29%20scale%280.86%29%27%3E%3Cpath%20d%3D%27M-22%2070%20Q-21%2022%20-10%2015%20L10%2015%20Q21%2022%2022%2070%20Z%27%20fill%3D%27url%28%23fl%29%27%2F%3E%3Cellipse%20cx%3D%270%27%20cy%3D%272%27%20rx%3D%2712%27%20ry%3D%2714%27%20fill%3D%27url%28%23fl%29%27%2F%3E%3Cpath%20d%3D%27M8%20-10%20Q20%20-16%2022%20-2%20Q18%20-8%209%20-6%20Z%27%20fill%3D%27url%28%23fl%29%27%2F%3E%3C%2Fg%3E%3Cellipse%20cx%3D%2731%27%20cy%3D%2728%27%20rx%3D%275.4%27%20ry%3D%274.4%27%20fill%3D%27%23fff%27%20opacity%3D%27.9%27%2F%3E%3Cellipse%20cx%3D%2764%27%20cy%3D%2738%27%20rx%3D%273.4%27%20ry%3D%272.8%27%20fill%3D%27%23fff%27%20opacity%3D%27.62%27%2F%3E%20%3Crect%20width%3D%2796%27%20height%3D%2770%27%20fill%3D%27url%28%23vig%29%27%2F%3E%20%3Crect%20width%3D%2796%27%20height%3D%2770%27%20fill%3D%27%23C98134%27%20opacity%3D%27.16%27%20style%3D%27mix-blend-mode%3Aoverlay%27%2F%3E%20%3Crect%20width%3D%2796%27%20height%3D%2770%27%20filter%3D%27url%28%23gr%29%27%20opacity%3D%27.66%27%20style%3D%27mix-blend-mode%3Aoverlay%27%2F%3E%3C%2Fsvg%3E");
}
.frame:nth-child(2){background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2096%2070%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cdefs%3E%3CradialGradient%20id%3D%27fl%27%20cx%3D%2738%25%27%20cy%3D%2730%25%27%20r%3D%2756%25%27%3E%20%3Cstop%20offset%3D%270%25%27%20stop-color%3D%27%23FFFBF4%27%2F%3E%3Cstop%20offset%3D%2722%25%27%20stop-color%3D%27%23F2DCC0%27%2F%3E%20%3Cstop%20offset%3D%2746%25%27%20stop-color%3D%27%23A89272%27%2F%3E%3Cstop%20offset%3D%2770%25%27%20stop-color%3D%27%235C5A42%27%2F%3E%20%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%23232A1C%27%2F%3E%3C%2FradialGradient%3E%20%3CradialGradient%20id%3D%27vig%27%20cx%3D%2738%25%27%20cy%3D%2730%25%27%20r%3D%2772%25%27%3E%20%3Cstop%20offset%3D%270%25%27%20stop-color%3D%27%23000%27%20stop-opacity%3D%270%27%2F%3E%3Cstop%20offset%3D%2758%25%27%20stop-color%3D%27%230C1209%27%20stop-opacity%3D%27.3%27%2F%3E%20%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%23080D06%27%20stop-opacity%3D%27.88%27%2F%3E%3C%2FradialGradient%3E%20%3Cfilter%20id%3D%27gr%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.42%27%20numOctaves%3D%274%27%20seed%3D%2719%27%20result%3D%27n%27%2F%3E%20%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%27.18%27%20in%3D%27n%27%2F%3E%20%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27table%27%20tableValues%3D%270%20.6%201%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%20%3Cfilter%20id%3D%27sb%27%3E%3CfeGaussianBlur%20stdDeviation%3D%27.7%27%2F%3E%3C%2Ffilter%3E%20%3Cfilter%20id%3D%27sb2%27%3E%3CfeGaussianBlur%20stdDeviation%3D%271.5%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%20%3Crect%20width%3D%2796%27%20height%3D%2770%27%20fill%3D%27%23141A11%27%2F%3E%3Crect%20width%3D%2796%27%20height%3D%2770%27%20fill%3D%27%231F2618%27%20opacity%3D%27.5%27%2F%3E%20%3Cg%20transform%3D%27rotate%28-11%2038%2034%29%27%3E%3Cg%20filter%3D%27url%28%23sb%29%27%20transform%3D%27translate%2838%2C30%29%20scale%281.05%29%27%3E%3Cpath%20d%3D%27M-22%2070%20Q-21%2022%20-10%2015%20L10%2015%20Q21%2022%2022%2070%20Z%27%20fill%3D%27url%28%23fl%29%27%2F%3E%3Cellipse%20cx%3D%270%27%20cy%3D%272%27%20rx%3D%2712%27%20ry%3D%2714%27%20fill%3D%27url%28%23fl%29%27%2F%3E%3Cpath%20d%3D%27M8%20-10%20Q20%20-16%2022%20-2%20Q18%20-8%209%20-6%20Z%27%20fill%3D%27url%28%23fl%29%27%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20filter%3D%27url%28%23sb2%29%27%20transform%3D%27translate%2872%2C44%29%20scale%280.8%29%27%3E%3Cpath%20d%3D%27M-16%2070%20Q-15%2024%20-7%2017%20L8%2017%20Q16%2024%2017%2070%20Z%27%20fill%3D%27url%28%23fl%29%27%20opacity%3D%27.8%27%2F%3E%3Cellipse%20cx%3D%270%27%20cy%3D%274%27%20rx%3D%2710%27%20ry%3D%2711.5%27%20fill%3D%27url%28%23fl%29%27%20opacity%3D%27.8%27%2F%3E%3C%2Fg%3E%3Cellipse%20cx%3D%2736%27%20cy%3D%2726%27%20rx%3D%276.6%27%20ry%3D%275.2%27%20fill%3D%27%23fff%27%20opacity%3D%27.94%27%2F%3E%20%3Crect%20width%3D%2796%27%20height%3D%2770%27%20fill%3D%27url%28%23vig%29%27%2F%3E%20%3Crect%20width%3D%2796%27%20height%3D%2770%27%20fill%3D%27%23C98134%27%20opacity%3D%27.16%27%20style%3D%27mix-blend-mode%3Aoverlay%27%2F%3E%20%3Crect%20width%3D%2796%27%20height%3D%2770%27%20filter%3D%27url%28%23gr%29%27%20opacity%3D%27.6%27%20style%3D%27mix-blend-mode%3Aoverlay%27%2F%3E%3C%2Fsvg%3E");}
.frame:nth-child(3),.frame.f3{background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2096%2070%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cdefs%3E%3CradialGradient%20id%3D%27fl%27%20cx%3D%2748%25%27%20cy%3D%2736%25%27%20r%3D%2784%25%27%3E%20%3Cstop%20offset%3D%270%25%27%20stop-color%3D%27%23FFFFFF%27%2F%3E%3Cstop%20offset%3D%2722%25%27%20stop-color%3D%27%23F2DCC0%27%2F%3E%20%3Cstop%20offset%3D%2746%25%27%20stop-color%3D%27%23A89272%27%2F%3E%3Cstop%20offset%3D%2770%25%27%20stop-color%3D%27%235C5A42%27%2F%3E%20%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%23232A1C%27%2F%3E%3C%2FradialGradient%3E%20%3CradialGradient%20id%3D%27vig%27%20cx%3D%2748%25%27%20cy%3D%2736%25%27%20r%3D%2772%25%27%3E%20%3Cstop%20offset%3D%270%25%27%20stop-color%3D%27%23000%27%20stop-opacity%3D%270%27%2F%3E%3Cstop%20offset%3D%2758%25%27%20stop-color%3D%27%230C1209%27%20stop-opacity%3D%27.3%27%2F%3E%20%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%23080D06%27%20stop-opacity%3D%27.88%27%2F%3E%3C%2FradialGradient%3E%20%3Cfilter%20id%3D%27gr%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.6%27%20numOctaves%3D%274%27%20seed%3D%2731%27%20result%3D%27n%27%2F%3E%20%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%27.18%27%20in%3D%27n%27%2F%3E%20%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27table%27%20tableValues%3D%270%20.6%201%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%20%3Cfilter%20id%3D%27sb%27%3E%3CfeGaussianBlur%20stdDeviation%3D%27.7%27%2F%3E%3C%2Ffilter%3E%20%3Cfilter%20id%3D%27sb2%27%3E%3CfeGaussianBlur%20stdDeviation%3D%271.5%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%20%3Crect%20width%3D%2796%27%20height%3D%2770%27%20fill%3D%27%231A2016%27%2F%3E%3Crect%20width%3D%2796%27%20height%3D%2770%27%20fill%3D%27%23242B1B%27%20opacity%3D%27.5%27%2F%3E%20%3Cg%20filter%3D%27url%28%23sb%29%27%20transform%3D%27translate%2828%2C32%29%20scale%280.95%29%27%3E%3Cpath%20d%3D%27M-19%2070%20Q-17%2020%20-8%2012%20L9%2012%20Q18%2020%2020%2070%20Z%27%20fill%3D%27url%28%23fl%29%27%2F%3E%3Cpath%20d%3D%27M-14%2026%20Q-17%204%200%200%20Q17%204%2014%2026%20Q14%2034%200%2034%20Q-14%2034%20-14%2026%20Z%27%20fill%3D%27url%28%23fl%29%27%2F%3E%3Cpath%20d%3D%27M-15%208%20Q0%20-6%2015%208%20Q12%20-2%200%20-4%20Q-12%20-2%20-15%208%20Z%27%20fill%3D%27%231B2114%27%20opacity%3D%27.5%27%2F%3E%3C%2Fg%3E%3Cg%20filter%3D%27url%28%23sb%29%27%20transform%3D%27translate%2856%2C32%29%20scale%280.95%29%27%3E%3Cpath%20d%3D%27M-22%2070%20Q-21%2022%20-10%2015%20L10%2015%20Q21%2022%2022%2070%20Z%27%20fill%3D%27url%28%23fl%29%27%2F%3E%3Cellipse%20cx%3D%270%27%20cy%3D%272%27%20rx%3D%2712%27%20ry%3D%2714%27%20fill%3D%27url%28%23fl%29%27%2F%3E%3Cpath%20d%3D%27M8%20-10%20Q20%20-16%2022%20-2%20Q18%20-8%209%20-6%20Z%27%20fill%3D%27url%28%23fl%29%27%2F%3E%3C%2Fg%3E%3Cg%20filter%3D%27url%28%23sb2%29%27%20transform%3D%27translate%2884%2C42%29%20scale%280.75%29%27%3E%3Cpath%20d%3D%27M-16%2070%20Q-15%2024%20-7%2017%20L8%2017%20Q16%2024%2017%2070%20Z%27%20fill%3D%27url%28%23fl%29%27%20opacity%3D%27.8%27%2F%3E%3Cellipse%20cx%3D%270%27%20cy%3D%274%27%20rx%3D%2710%27%20ry%3D%2711.5%27%20fill%3D%27url%28%23fl%29%27%20opacity%3D%27.8%27%2F%3E%3C%2Fg%3E%3Cellipse%20cx%3D%2748%27%20cy%3D%2734%27%20rx%3D%2730%27%20ry%3D%2724%27%20fill%3D%27%23fff%27%20opacity%3D%27.94%27%2F%3E%3Cellipse%20cx%3D%2748%27%20cy%3D%2734%27%20rx%3D%2740%27%20ry%3D%2731%27%20fill%3D%27%23fff%27%20opacity%3D%27.5%27%2F%3E%20%3Crect%20width%3D%2796%27%20height%3D%2770%27%20fill%3D%27url%28%23vig%29%27%2F%3E%20%3Crect%20width%3D%2796%27%20height%3D%2770%27%20fill%3D%27%23C98134%27%20opacity%3D%27.09%27%20style%3D%27mix-blend-mode%3Aoverlay%27%2F%3E%20%3Crect%20width%3D%2796%27%20height%3D%2770%27%20filter%3D%27url%28%23gr%29%27%20opacity%3D%27.44%27%20style%3D%27mix-blend-mode%3Aoverlay%27%2F%3E%3C%2Fsvg%3E");}
.frame:nth-child(4),.frame.f4{background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2096%2070%27%20preserveAspectRatio%3D%27none%27%3E%20%3Cdefs%3E%3CradialGradient%20id%3D%27fl%27%20cx%3D%2784%25%27%20cy%3D%2742%25%27%20r%3D%2754%25%27%3E%20%3Cstop%20offset%3D%270%25%27%20stop-color%3D%27%23FFFAF0%27%2F%3E%3Cstop%20offset%3D%2722%25%27%20stop-color%3D%27%23F2DCC0%27%2F%3E%20%3Cstop%20offset%3D%2746%25%27%20stop-color%3D%27%23A89272%27%2F%3E%3Cstop%20offset%3D%2770%25%27%20stop-color%3D%27%235C5A42%27%2F%3E%20%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%23232A1C%27%2F%3E%3C%2FradialGradient%3E%20%3CradialGradient%20id%3D%27vig%27%20cx%3D%2784%25%27%20cy%3D%2742%25%27%20r%3D%2772%25%27%3E%20%3Cstop%20offset%3D%270%25%27%20stop-color%3D%27%23000%27%20stop-opacity%3D%270%27%2F%3E%3Cstop%20offset%3D%2758%25%27%20stop-color%3D%27%230C1209%27%20stop-opacity%3D%27.3%27%2F%3E%20%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%23080D06%27%20stop-opacity%3D%27.88%27%2F%3E%3C%2FradialGradient%3E%20%3Cfilter%20id%3D%27gr%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.55%27%20numOctaves%3D%274%27%20seed%3D%2743%27%20result%3D%27n%27%2F%3E%20%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%27.18%27%20in%3D%27n%27%2F%3E%20%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27table%27%20tableValues%3D%270%20.6%201%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%20%3Cfilter%20id%3D%27sb%27%3E%3CfeGaussianBlur%20stdDeviation%3D%27.7%27%2F%3E%3C%2Ffilter%3E%20%3Cfilter%20id%3D%27sb2%27%3E%3CfeGaussianBlur%20stdDeviation%3D%271.5%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%20%3Crect%20width%3D%2796%27%20height%3D%2770%27%20fill%3D%27%2312180F%27%2F%3E%3Crect%20width%3D%2796%27%20height%3D%2770%27%20fill%3D%27%231B2214%27%20opacity%3D%27.5%27%2F%3E%20%3Cg%20filter%3D%27url%28%23sb%29%27%20transform%3D%27translate%2824%2C36%29%20scale%280.86%29%27%3E%3Cpath%20d%3D%27M-19%2070%20Q-17%2020%20-8%2012%20L9%2012%20Q18%2020%2020%2070%20Z%27%20fill%3D%27url%28%23fl%29%27%2F%3E%3Cpath%20d%3D%27M-14%2026%20Q-17%204%200%200%20Q17%204%2014%2026%20Q14%2034%200%2034%20Q-14%2034%20-14%2026%20Z%27%20fill%3D%27url%28%23fl%29%27%2F%3E%3Cpath%20d%3D%27M-15%208%20Q0%20-6%2015%208%20Q12%20-2%200%20-4%20Q-12%20-2%20-15%208%20Z%27%20fill%3D%27%231B2114%27%20opacity%3D%27.5%27%2F%3E%3C%2Fg%3E%3Cg%20filter%3D%27url%28%23sb2%29%27%20transform%3D%27translate%2850%2C40%29%20scale%280.9%29%27%3E%3Cpath%20d%3D%27M-16%2070%20Q-15%2024%20-7%2017%20L8%2017%20Q16%2024%2017%2070%20Z%27%20fill%3D%27url%28%23fl%29%27%20opacity%3D%27.8%27%2F%3E%3Cellipse%20cx%3D%270%27%20cy%3D%274%27%20rx%3D%2710%27%20ry%3D%2711.5%27%20fill%3D%27url%28%23fl%29%27%20opacity%3D%27.8%27%2F%3E%3C%2Fg%3E%3Cg%20filter%3D%27url%28%23sb%29%27%3E%3Cpath%20d%3D%27M96%2024%20Q82%2033%2080%2047%20Q85%2058%2096%2060%20Z%27%20fill%3D%27url%28%23fl%29%27%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%27M96%2028%20Q86%2035%2085%2046%20Q89%2054%2096%2056%20Z%27%20fill%3D%27%23fff%27%20opacity%3D%27.82%27%2F%3E%3Cellipse%20cx%3D%2723%27%20cy%3D%2734%27%20rx%3D%273.2%27%20ry%3D%272.7%27%20fill%3D%27%23fff%27%20opacity%3D%27.42%27%2F%3E%20%3Crect%20width%3D%2796%27%20height%3D%2770%27%20fill%3D%27url%28%23vig%29%27%2F%3E%20%3Crect%20width%3D%2796%27%20height%3D%2770%27%20fill%3D%27%23C98134%27%20opacity%3D%27.16%27%20style%3D%27mix-blend-mode%3Aoverlay%27%2F%3E%20%3Crect%20width%3D%2796%27%20height%3D%2770%27%20filter%3D%27url%28%23gr%29%27%20opacity%3D%27.7%27%20style%3D%27mix-blend-mode%3Aoverlay%27%2F%3E%3C%2Fsvg%3E");}
#booth .frame{height:52px;}
/* half page 008 — hidden until earned */
#halfpage{left:41%;top:47%;--r:rotate(-16deg);transform:rotate(-16deg) scale(.4);width:150px;opacity:0;pointer-events:none;z-index:1;
  transition:transform 1s cubic-bezier(.2,.9,.3,1.2), opacity .8s;}
#halfpage.revealed{opacity:1;pointer-events:auto;z-index:4;transform:rotate(-16deg) scale(1.25) translate(-96px,178px);}
#halfpage .paperette{padding:12px 10px 4px;font-family:'Reenie Beanie',cursive;font-size:.85rem;line-height:1.3;color:var(--pen);
  background-image:repeating-linear-gradient(180deg, transparent 0 13px, rgba(157,182,204,.5) 13px 14px);
  clip-path:polygon(0 0,100% 0,100% 62%,94% 70%,86% 60%,76% 74%,66% 62%,55% 76%,44% 63%,33% 75%,22% 62%,12% 74%,4% 64%,0 72%);}
#halfpage .pgnum{font-family:'VT323',monospace;color:var(--pink);font-size:.8rem;}
/* PHASE 4 — the loose page shifts. A sheet with no spine on carpet slides out from under the
 * first hand that reaches for it. The move keeps its tilt and its scale and just goes: a few
 * degrees the other way, a hand's width along the floor, fast and then settling. */
#halfpage.revealed.shifted{
  transform:rotate(-5deg) scale(1.25) translate(-30px,190px);
  transition:transform .55s cubic-bezier(.18,.95,.28,1.06);
}

/* PHASE 4 — the photograph of page 003. Hidden behind the photobooth strip until it is earned
 * (content/gates.js), then it slides out from under the strip onto the carpet.
 * A 4x6 drugstore print: white border with the slightly larger bottom edge prints have, a
 * ruled page inside it, and the flash blowing out the lower half of the page. */
#snap{left:72%;top:13%;--r:rotate(-7deg);transform:rotate(-7deg) scale(.5);width:104px;opacity:0;pointer-events:none;z-index:2;
  transition:transform .9s cubic-bezier(.2,.9,.3,1.15), opacity .7s;}
#snap.revealed{opacity:1;pointer-events:auto;z-index:4;transform:rotate(-7deg) scale(1.15) translate(92px,392px);}
#snap .print{
  position:relative;overflow:hidden;padding:5px 5px 11px;background:#F3EEE3;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 3px 9px 12px rgba(8,3,6,.6);
  font-family:'Reenie Beanie',cursive;font-size:.72rem;line-height:1.25;color:#3B4D96;
}
#snap .shot{
  display:block;padding:8px 6px 18px;height:84px;overflow:hidden;
  background:
    repeating-linear-gradient(180deg, transparent 0 10px, rgba(157,182,204,.45) 10px 11px),
    #EFE7D2;
  /* the page in the photo is not square to the frame */
  transform:rotate(2.5deg) scale(1.06);transform-origin:40% 30%;
}
#snap .pgnum{position:absolute;top:9px;right:10px;font-family:'VT323',monospace;color:var(--pink);font-size:.7rem;z-index:2;}
/* the flash: a hard white bloom low in the frame that eats the bottom of the page */
#snap .flash{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 58% 88%, rgba(255,252,244,1) 0 22%, rgba(255,250,238,.85) 46%, rgba(255,248,232,0) 72%),
    linear-gradient(180deg, rgba(40,20,30,.18) 0, rgba(40,20,30,0) 30%);
  mix-blend-mode:screen;filter:blur(1px);
}

/* the zoom */
.art-snap{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;}
.art-snap .print{
  position:relative;flex:0 0 auto;width:min(360px,100%);padding:14px 14px 34px;background:#F3EEE3;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 6px 14px 22px rgba(8,3,6,.55);
  transform:rotate(-1.6deg);overflow:hidden;
}
.art-snap .page{
  position:relative;padding:22px 16px 40px;min-height:300px;
  font-family:'Reenie Beanie',cursive;font-size:1.22rem;line-height:22px;color:#3B4D96;
  background:
    repeating-linear-gradient(180deg, transparent 0 21px, rgba(157,182,204,.5) 21px 22px),
    linear-gradient(180deg,#F1E9D4,#EBE2CB);
  transform:rotate(1.8deg) scale(1.04);transform-origin:40% 20%;
  /* overexposed: low contrast, a little soft, a drugstore colour cast */
  filter:contrast(.86) saturate(.8) blur(.35px) sepia(.12);
}
.art-snap .page p{margin-bottom:22px;}
.art-snap .page .pgnum{position:absolute;top:8px;right:14px;font-family:'VT323',monospace;color:var(--pink);font-size:.95rem;letter-spacing:.12em;}
.art-snap .flash{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 68% 50% at 56% 92%, rgba(255,253,247,1) 0 24%, rgba(255,251,241,.88) 48%, rgba(255,248,232,0) 74%),
    radial-gradient(ellipse 40% 30% at 20% 10%, rgba(30,16,24,.22), transparent 70%);
  mix-blend-mode:screen;filter:blur(1.5px);
}
.art-snap .date{
  position:absolute;right:22px;bottom:40px;font-family:'VT323',monospace;font-size:.9rem;color:#E0731F;
  text-shadow:0 0 4px rgba(224,115,31,.7);letter-spacing:.08em;opacity:.9;
}
/* the back of the print, which she wrote on */
.art-snap .back{
  flex:1 1 200px;min-width:180px;padding:16px 14px;background:#E9E3D6;transform:rotate(1.4deg);
  box-shadow:2px 6px 12px rgba(8,3,6,.4);
  background-image:linear-gradient(180deg, rgba(0,0,0,0) 0 97%, rgba(120,100,80,.12) 100%);
}
.art-snap .pen{font-family:'Reenie Beanie',cursive;font-size:1.3rem;line-height:1.3;color:var(--pen);}

/* decorative non-clickables */
.deco{position:absolute;pointer-events:none;filter:drop-shadow(0 8px 10px var(--shadow));opacity:.92;}
#scrunchie{left:79%;top:78%;width:74px;height:74px;border-radius:50%;border:17px solid #7E5A9E;box-shadow:inset 0 0 0 3px #64447F;transform:rotate(18deg) scale(1.2);}
#gloss{left:37%;top:9%;width:16px;height:58px;border-radius:8px;background:linear-gradient(180deg,#D8B7C7,#A87B93);transform:rotate(24deg);}
#gloss::after{content:"";position:absolute;top:-9px;left:2px;right:2px;height:10px;border-radius:4px;background:#8E6E80;}
#sock{left:47%;top:86%;width:90px;height:34px;border-radius:18px;background:#D9D2C0;transform:rotate(-30deg) scale(1.35);box-shadow:inset 0 -8px 0 rgba(0,0,0,.08);}

.floor-exit{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:3;
  font-family:'Reenie Beanie',cursive;font-size:1.15rem;color:#C9B4A4;opacity:.75;text-align:center;
}
.floor-exit a{color:#E8A9C6;}

/* =========================================================
   ZOOM MODAL (artifacts)
========================================================= */
#modal{
  position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
  background:rgba(10,4,8,.78);padding:20px;
}
#modal.on{display:flex;animation:mfade .25s ease;}
@keyframes mfade{from{opacity:0;}to{opacity:1;}}
#modal-card{
  position:relative;max-width:440px;width:100%;max-height:86vh;overflow-y:auto;
  transform:rotate(-1.5deg);
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.6));
}
#modal-inner{background:var(--paper);padding:26px 24px 30px;box-shadow:inset 0 0 40px rgba(120,95,50,.2);}
#modal .caption{
  margin-top:14px;text-align:center;font-family:'Reenie Beanie',cursive;font-size:1.3rem;color:#EBD6C2;
  text-shadow:0 2px 5px rgba(0,0,0,.7);transform:rotate(.5deg);
}
#modal-close{
  position:absolute;top:-16px;right:-10px;font-family:'Reenie Beanie',cursive;font-size:1.25rem;
  color:#F0DCC8;background:#3A2530;padding:5px 14px;border-radius:30px;box-shadow:0 4px 8px rgba(0,0,0,.5);
}

/* Orientation stays outside the fiction's objects, small enough to feel like a note left by
 * the door. It is optional, dismissible, and never covers the notebook on narrow screens. */
.explore-hint{
  position:fixed;z-index:95;top:14px;left:14px;width:min(360px,calc(100vw - 28px));
  display:flex;gap:14px;align-items:flex-start;padding:12px 14px;
  background:#F3E8CF;color:#302136;border:1px solid #A88C94;
  box-shadow:5px 7px 16px rgba(8,3,6,.45);transform:rotate(-.45deg);
  font-family:'Special Elite',monospace;font-size:.78rem;line-height:1.35;
}
.explore-hint strong{display:block;color:#8E2F60;margin-bottom:3px;text-transform:uppercase;letter-spacing:.08em;}
.explore-hint button,.access-dock button,.discovery-head button{
  flex:none;padding:7px 10px;background:#452536;color:#F8E9D6;border:1px solid #C88AA8;
  font-family:'VT323',monospace;font-size:1rem;line-height:1;white-space:nowrap;
}
.access-dock{
  position:fixed;z-index:34;right:16px;top:16px;display:flex;gap:8px;align-items:center;
}
.access-dock button{box-shadow:0 5px 12px rgba(0,0,0,.45);}
.access-dock button:hover,.access-dock button:focus-visible,.explore-hint button:hover,.explore-hint button:focus-visible{background:#713B58;}
.discovery-panel{
  position:fixed;z-index:96;right:14px;top:58px;width:min(330px,calc(100vw - 28px));max-height:calc(100dvh - 76px);overflow:auto;
  padding:18px;background:#EEE4CC;color:#302D39;border:1px solid #8E7F76;
  box-shadow:8px 12px 28px rgba(5,2,4,.62);transform:rotate(.35deg);
  font-family:'Special Elite',monospace;
}
.discovery-head{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px dashed #9E8A80;padding-bottom:9px;}
.discovery-head h2{font-family:'Gochi Hand',cursive;color:var(--pen);font-size:1.45rem;}
.discovery-panel>p{font-size:.76rem;line-height:1.4;margin:12px 0;}
.discovery-panel ol{list-style:none;display:grid;gap:7px;font-size:.74rem;}
.discovery-panel li{color:#777067;}
.discovery-panel li.found{color:#303D78;}

@media (max-width:700px){
  .explore-hint{top:8px;left:8px;width:calc(100vw - 16px);font-size:.7rem;}
  .access-dock{top:auto;right:8px;bottom:8px;left:112px;justify-content:flex-end;z-index:34;}
  .access-dock button{font-size:.86rem;padding:8px 7px;}
  .discovery-panel{top:8px;right:8px;width:calc(100vw - 16px);max-height:calc(100dvh - 16px);}
  #floor{min-height:760px;}
}

/* artifact interiors */
/* artifact inner styles */
.art-receipt{font-family:'Special Elite',monospace;font-size:.82rem;line-height:1.7;color:#3A362B;}
.art-receipt .rc-center{text-align:center;}
.art-receipt .rc-row{display:flex;justify-content:space-between;}
.art-receipt .rc-hand{font-family:'Reenie Beanie',cursive;font-size:1.25rem;color:var(--pen);margin-top:14px;transform:rotate(-1.5deg);border-top:1px dashed #B8AF97;padding-top:10px;}
.art-note{font-family:'Reenie Beanie',cursive;font-size:1.5rem;line-height:1.4;color:var(--pen);}
.art-note .sig{display:block;text-align:right;font-size:1.7rem;margin-top:8px;}
.art-aim{font-family:'VT323',monospace;font-size:1.02rem;line-height:1.5;color:#2C2C33;}
.art-aim .sn-a{color:#B03A8F;font-weight:bold;}
.art-aim .sn-b{color:#2B54A8;font-weight:bold;}
.art-aim .sys{color:#8B8574;font-style:italic;}
.art-aim .hand{font-family:'Reenie Beanie',cursive;font-size:1.25rem;color:var(--pen);margin-top:12px;transform:rotate(-1deg);}
.art-slip{font-family:'Special Elite',monospace;font-size:.8rem;line-height:1.8;color:#3A2C2C;}
.art-slip .sh{letter-spacing:.1em;color:#B03A3A;border-bottom:2px solid #B03A3A;padding-bottom:4px;margin-bottom:10px;font-size:.85rem;}
.art-slip .field b{border-bottom:1px solid #A99;}
.art-slip .scrib{font-family:'Gochi Hand',cursive;color:var(--sharpie);}
.art-slip .forged{font-family:'Shadows Into Light',cursive;font-size:1.2rem;color:#3A4A9A;}
.art-map{font-family:'Nunito',sans-serif;font-size:.8rem;line-height:1.65;color:#333;}
.art-map .mq-bar{font-weight:800;color:#fff;background:#3D5AA8;padding:4px 8px;margin:-26px -24px 12px;}
.art-map .hl{background:#F5E27A;}
.art-map .hand{font-family:'Reenie Beanie',cursive;font-size:1.3rem;color:var(--pen);margin-top:12px;transform:rotate(-1deg);}
.art-cd{font-family:'Gochi Hand',cursive;font-size:1.05rem;line-height:1.7;color:var(--sharpie);}
.art-cd .no{color:var(--stamp);}
.art-cd .meta{font-family:'Reenie Beanie',cursive;color:var(--pencil);font-size:1.1rem;margin-top:10px;}
.art-booth{display:flex;gap:10px;align-items:flex-start;}
.art-booth .strip{flex:0 0 96px;background:#141014;padding:8px;display:flex;flex-direction:column;gap:7px;}
.art-booth .frame{height:70px;}
.art-booth .hand{font-family:'Reenie Beanie',cursive;font-size:1.3rem;line-height:1.3;color:var(--pen);transform:rotate(-1deg);}
.art-half{font-family:'Reenie Beanie',cursive;font-size:1.45rem;line-height:1.5;color:var(--pen);
  background-image:repeating-linear-gradient(180deg, transparent 0 29px, rgba(157,182,204,.55) 29px 30px);}
.art-half .cut{color:var(--pencil);font-size:1.1rem;}
.art-half .num{font-family:'VT323',monospace;color:var(--pink);font-size:1rem;letter-spacing:.15em;}

@media (max-width:700px){
  /* At 390 the room is tight, so two things have to be held true by construction:
   *
   *  - OBJECTS MAY OVERLAP OBJECTS, NEVER TYPE. The room note owns the top band and the footer
   *    owns the bottom band; nothing is placed inside either, and no object may sit over another
   *    object's writing. `npm run overlap` measures this at every shipping viewport.
   *  - The desktop scale-ups do not apply here — they put 390 at 115% density and 14 overlapping
   *    pairs, which stops being a floor and becomes a collage.
   */
  #floor{min-height:100vh;max-height:none;}

  /* reserved: top band 0-118px (room note), bottom band from 86% (footer) */
  #diary{width:min(216px,56vw);left:48%;top:17%;--r:translateX(-50%);}
  .d-lock{left:calc(48% + min(216px,56vw)/2 - 132px);top:calc(17% + (min(216px,56vw)*4/3)*0.30);width:132px;height:94px;}
  .d-strip{font-size:.74rem;padding:1px 7px 0;}
  .ds1{top:68%;left:9%;}
  .ds2{top:79%;left:18%;}

  #cd{width:78px;height:78px;left:2%;top:14%;--r:rotate(-12deg) scale(1);transform:rotate(-12deg) scale(1);}
  #booth{left:76%;top:16%;--r:rotate(14deg) scale(.82);transform:rotate(14deg) scale(.82);}
  #receipt{width:86px;left:60%;top:53%;--r:rotate(8deg) scale(1);transform:rotate(8deg) scale(1);}
  #slip{width:116px;left:2%;top:53%;--r:rotate(-9deg) scale(1);transform:rotate(-9deg) scale(1);}
  #bnote{width:84px;left:30%;top:70%;--r:rotate(-5deg) scale(1);transform:rotate(-5deg) scale(1);}
  #aim{width:126px;left:4%;top:74%;--r:rotate(4deg) scale(1);transform:rotate(4deg) scale(1);}
  #mapq{width:120px;left:50%;top:74%;--r:rotate(6deg) scale(1);transform:rotate(6deg) scale(1);}
  #scrunchie{left:80%;top:62%;transform:rotate(18deg) scale(.8);}
  #snap{left:66%;top:18%;width:92px;}
  /* it comes out from behind the strip and stays half under it — there is no open carpet
   * on a phone, and a print half under a strip is where a print half under a strip lives */
  #snap.revealed{transform:rotate(-7deg) scale(1) translate(-14px,190px);}
  /* on a phone there is no carpet below the notebook that is not already somebody's text, so
   * the half page comes out from under its LEFT edge instead — measured, not eyeballed:
   * tools/overlap-audit.mjs checks the earned floor at 390 with and without the shift */
  #halfpage.revealed{left:-5%;top:25%;transform:rotate(-14deg) scale(.7);}
  #halfpage.revealed.shifted{transform:rotate(-9deg) scale(.7) translate(-16px,76px);}
  #sock{left:33%;top:60%;transform:rotate(-30deg) scale(.85);}
  #gloss{left:88%;top:44%;}

}


/* ============================================================
   THE DEVICE
   Carried over from okayso.pink, where a little pink toy is the thing that talks to you. Every
   line the notebook says now appears on its screen instead of in a toast pill — a pill is web
   chrome, and this is a keychain toy on the floor of a bedroom. It stays visible while you read,
   because it is an object in the room and not part of the page.
   ============================================================ */
/* the holographic sticker. it is stuck on, not printed on: it sits above the cover's
   grime and carries its own peel-lift shadow. bottom-left, clear of the strips and
   well clear of the lock. */
.d-sticker{
  position:absolute;left:5.5%;top:35%;width:34%;aspect-ratio:1140/1170;z-index:4;
  background:url("../content/artifacts/media/sticker-meanbitch.webp") no-repeat center/contain;
  transform:rotate(-9deg);
  filter:drop-shadow(2px 5px 4px rgba(20,4,14,.5)) saturate(1.12) brightness(1.1);
  pointer-events:none;
}

#tama{
  position:fixed;left:22px;bottom:18px;z-index:95;
  width:118px;height:150px;
  transform:rotate(-6deg);
  filter:drop-shadow(4px 12px 14px rgba(8,3,6,.66));
  user-select:none;-webkit-user-select:none;
}
/* you held the magazine up to your face. everything else in the room is behind it.
   without this the device sits on top of the spread's type at 390. */
body:has(#modal.on) #tama{z-index:55;}
#tama.blip .tama-screen{animation:lcdblip .34s steps(2) 2;}
@keyframes lcdblip{50%{filter:brightness(1.22);}}

/* the ball chain and the heart charm, top right */
.tama-chain{position:absolute;right:6px;top:-2px;width:34px;height:34px;}
.tama-chain i{
  position:absolute;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #FDFDFF 0 26%, #C9CCD8 45%, #7E8496 78%, #5B6072);
}
.tama-chain i:nth-child(1){right:20px;top:11px;}
.tama-chain i:nth-child(2){right:14px;top:5px;}
.tama-chain i:nth-child(3){right:7px;top:1px;}
.tama-chain i:nth-child(4){right:0px;top:2px;}
.tama-chain i:nth-child(5){right:-5px;top:8px;}
.tama-chain b{
  position:absolute;right:-9px;top:16px;width:13px;height:12px;
  background:
    radial-gradient(circle at 30% 30%, #FBD3E6 0 40%, #E77DAE 70%, #C9548E),
    radial-gradient(circle at 70% 30%, #FBD3E6 0 40%, #E77DAE 70%, #C9548E);
  clip-path:polygon(50% 100%, 6% 42%, 6% 22%, 24% 6%, 50% 22%, 76% 6%, 94% 22%, 94% 42%);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}

/* the shell: translucent hot pink, glitter suspended in it, stones around the rim */
.tama-shell{
  position:absolute;inset:0;
  border-radius:50% 50% 46% 46% / 54% 54% 46% 46%;
  /* stones set around the rim — sized in px, because percentage radii on a non-square shell
     come out as saucers rather than rhinestones */
  background:
    radial-gradient(circle 3.1px at 59.0px 9.0px, #FFFFFF 0 38%, #F7E2EE 58%, rgba(255,255,255,.55) 78%, transparent 100%),
    radial-gradient(circle 3.1px at 78.9px 14.0px, #FFFFFF 0 38%, #F7E2EE 58%, rgba(255,255,255,.55) 78%, transparent 100%),
    radial-gradient(circle 3.1px at 95.8px 28.3px, #FFFFFF 0 38%, #F7E2EE 58%, rgba(255,255,255,.55) 78%, transparent 100%),
    radial-gradient(circle 3.1px at 107.0px 49.7px, #FFFFFF 0 38%, #F7E2EE 58%, rgba(255,255,255,.55) 78%, transparent 100%),
    radial-gradient(circle 3.1px at 111.0px 75.0px, #FFFFFF 0 38%, #F7E2EE 58%, rgba(255,255,255,.55) 78%, transparent 100%),
    radial-gradient(circle 3.1px at 107.0px 100.3px, #FFFFFF 0 38%, #F7E2EE 58%, rgba(255,255,255,.55) 78%, transparent 100%),
    radial-gradient(circle 3.1px at 95.8px 121.7px, #FFFFFF 0 38%, #F7E2EE 58%, rgba(255,255,255,.55) 78%, transparent 100%),
    radial-gradient(circle 3.1px at 78.9px 136.0px, #FFFFFF 0 38%, #F7E2EE 58%, rgba(255,255,255,.55) 78%, transparent 100%),
    radial-gradient(circle 3.1px at 59.0px 141.0px, #FFFFFF 0 38%, #F7E2EE 58%, rgba(255,255,255,.55) 78%, transparent 100%),
    radial-gradient(circle 3.1px at 39.1px 136.0px, #FFFFFF 0 38%, #F7E2EE 58%, rgba(255,255,255,.55) 78%, transparent 100%),
    radial-gradient(circle 3.1px at 22.2px 121.7px, #FFFFFF 0 38%, #F7E2EE 58%, rgba(255,255,255,.55) 78%, transparent 100%),
    radial-gradient(circle 3.1px at 11.0px 100.3px, #FFFFFF 0 38%, #F7E2EE 58%, rgba(255,255,255,.55) 78%, transparent 100%),
    radial-gradient(circle 3.1px at 7.0px 75.0px, #FFFFFF 0 38%, #F7E2EE 58%, rgba(255,255,255,.55) 78%, transparent 100%),
    radial-gradient(circle 3.1px at 11.0px 49.7px, #FFFFFF 0 38%, #F7E2EE 58%, rgba(255,255,255,.55) 78%, transparent 100%),
    radial-gradient(circle 3.1px at 22.2px 28.3px, #FFFFFF 0 38%, #F7E2EE 58%, rgba(255,255,255,.55) 78%, transparent 100%),
    radial-gradient(circle 3.1px at 39.1px 14.0px, #FFFFFF 0 38%, #F7E2EE 58%, rgba(255,255,255,.55) 78%, transparent 100%),
    radial-gradient(ellipse 62% 40% at 34% 15%, rgba(255,255,255,.55), transparent 62%),
    radial-gradient(ellipse 80% 70% at 50% 62%, #E7449A 0%, #C92C7E 52%, #9E1E60 100%);
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,.55),
    inset 0 -8px 14px rgba(90,10,50,.5),
    inset 0 0 0 2px rgba(255,255,255,.2);
  display:block;
}
/* glitter suspended in the plastic */
.tama-shell::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20120%20150%27%3E%20%3Cdefs%3E%3Cfilter%20id%3D%27g%27%3E%20%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%272%27%20seed%3D%279%27%20result%3D%27n%27%2F%3E%20%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%20in%3D%27n%27%2F%3E%20%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%27table%27%20tableValues%3D%270%200%200%200%20.25%201%27%2F%3E%3C%2FfeComponentTransfer%3E%20%3C%2Ffilter%3E%3C%2Fdefs%3E%20%3Crect%20width%3D%27120%27%20height%3D%27150%27%20filter%3D%27url%28%23g%29%27%20fill%3D%27%23fff%27%20opacity%3D%27.9%27%2F%3E%20%3C%2Fsvg%3E");
  background-size:100% 100%;
  mix-blend-mode:screen;opacity:.5;
}

.tama-brand{
  position:absolute;left:0;right:0;top:15px;text-align:center;
  font-family:'Gochi Hand',cursive;font-size:.82rem;color:#2A0E1E;
  text-shadow:0 1px 0 rgba(255,255,255,.32);letter-spacing:.02em;
}

/* the screen */
.tama-screen{
  position:absolute;left:16px;right:16px;top:34px;height:62px;
  --lcd-bg:#9AA37D; --lcd-ink:#191B14;
  background:linear-gradient(178deg,#A6AE88,var(--lcd-bg) 40%,#8E976F);
  box-shadow:inset 0 0 0 2px #6E7458, inset 0 2px 5px rgba(0,0,0,.42);
  overflow:hidden;
}
/* the lcd grid */
.tama-screen::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(25,27,20,.16) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(90deg, rgba(25,27,20,.16) 0 1px, transparent 1px 2px);
}
.tama-pet{position:absolute;left:50%;top:3px;width:44px;height:33px;transform:translateX(-50%);}
.tama-line{
  position:absolute;left:3px;right:3px;bottom:3px;
  font-family:'VT323',monospace;font-size:.72rem;line-height:1.02;
  color:var(--lcd-ink);text-align:center;
  max-height:2.1em;overflow:hidden;
}

.tama-url{
  position:absolute;left:0;right:0;top:100px;text-align:center;
  font-family:'Nunito',sans-serif;font-weight:800;font-size:.56rem;color:#2A0E1E;
  letter-spacing:.03em;
}

/* three keys that have never once done anything important */
.tama-keys{position:absolute;left:0;right:0;top:116px;display:flex;justify-content:center;gap:11px;}
.tama-keys i{
  width:19px;height:19px;border-radius:50%;cursor:pointer;
  background:radial-gradient(circle at 36% 30%, #FFFFFF 0 34%, #EFE9E2 60%, #C9C0B6 88%, #A79D92);
  box-shadow:0 2px 3px rgba(60,10,36,.45), inset 0 -2px 2px rgba(0,0,0,.14);
}
.tama-keys i:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(60,10,36,.5);}

@media (max-width:700px){
  #tama{left:10px;bottom:12px;width:92px;height:117px;}
  .tama-brand{top:11px;font-size:.66rem;}
  .tama-screen{left:12px;right:12px;top:26px;height:49px;}
  .tama-pet{width:35px;height:27px;}
  .tama-line{font-size:.6rem;}
  .tama-url{top:78px;font-size:.46rem;}
  .tama-keys{top:90px;gap:8px;}
  .tama-keys i{width:15px;height:15px;}
}

/* ============================================================
   GLOSS — the magazine that ran her essay
   The publication is invented; see content/artifacts/zine.js. What matters here is that it is the
   only glossy object in a room made of handwriting and receipts, and that it has been read: the
   cover is curled, because it lived in a bag.
   ============================================================ */
#zine{
  left:71%;top:52%;
  --r:perspective(820px) rotateX(13deg) rotateZ(7deg) scale(1.16);
  transform:perspective(820px) rotateX(13deg) rotateZ(7deg) scale(1.16);
  width:104px;z-index:3;
  filter:drop-shadow(6px 18px 16px rgba(8,3,6,.66));
}
.zine-cover{
  position:relative;width:100%;height:136px;overflow:hidden;
  background:#0A0912;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
}
.zc-photo{
  position:absolute;inset:0;
  /* NB: url() resolves against the STYLESHEET, not the document */
  background-image:url("../content/artifacts/media/gloss-cover.webp");
  background-size:cover;background-position:50% 18%;
  filter:saturate(.95) contrast(1.04);
}
.zc-mast{
  position:absolute;left:0;right:0;top:5px;text-align:center;
  font-family:'Nunito',sans-serif;font-weight:800;font-size:1.42rem;letter-spacing:-.03em;
  color:#F4FF57;text-shadow:0 1px 0 rgba(0,0,0,.5);line-height:1;
}
/* the left scrim: coverlines were landing on his face and reading as breakage.
   real covers solve this the same way — a soft column of shade under the type. */
.zc-scrim{
  position:absolute;left:0;top:22px;bottom:12px;width:52%;
  background:linear-gradient(90deg, rgba(8,6,18,.72) 0%, rgba(8,6,18,.5) 55%, rgba(8,6,18,0) 100%);
  pointer-events:none;
}
/* coverlines run down the left gutter — explicit positions, because stacked margins put them
   on top of each other and on top of the face */
.zc-lines{position:absolute;inset:0;font-family:'Nunito',sans-serif;font-size:.3rem;line-height:1.14;color:#fff;}
.zc-lines b,.zc-lines i,.zc-lines u{
  position:absolute;left:4px;width:42%;
  text-shadow:0 1px 2px rgba(0,0,0,.95), 0 0 5px rgba(0,0,0,.7);
}
.zc-lines b{top:29px;font-weight:800;}
.zc-lines i{top:57px;font-style:normal;color:#F9C6E0;}
.zc-lines u{top:86px;text-decoration:none;color:#F4FF57;font-weight:800;}
.zc-flash{
  position:absolute;right:3px;bottom:16px;width:40px;padding:3px 2px;
  background:#F4FF57;color:#151020;
  font-family:'Nunito',sans-serif;font-weight:800;font-size:.28rem;line-height:1.1;text-align:center;
  transform:rotate(-7deg);
}
.zc-foot{
  position:absolute;left:0;right:0;bottom:2px;text-align:center;
  font-family:'Nunito',sans-serif;font-size:.26rem;letter-spacing:.06em;color:rgba(255,255,255,.75);
}
/* it lived in a bag */
.zc-curl{
  position:absolute;right:0;top:0;bottom:0;width:22px;
  background:linear-gradient(270deg, rgba(255,255,255,.2), rgba(255,255,255,0) 42%),
             linear-gradient(270deg, rgba(0,0,0,.5), rgba(0,0,0,0) 60%);
}

/* ---------- opened ---------- */
#modal-card.wide{max-width:min(740px, 95vw);}
.zine-open{
  display:flex;gap:0;margin:-26px -24px 0;background:#0A0912;
  align-items:stretch;
}
.zine-page{position:relative;width:50%;}
.zine-right img{display:block;width:100%;height:auto;}
/* the gutter between the two pages */
.zine-open::after{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:26px;margin-left:-13px;
  background:linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.55) 45%, rgba(0,0,0,.55) 55%, rgba(0,0,0,0));
  pointer-events:none;z-index:2;
}
/* the boys page */
.zine-left{
  background:linear-gradient(178deg,#FBF7EE,#F2ECDF);
  padding:12px 12px 14px;color:#1A1620;
  font-family:'Nunito',sans-serif;
}
.zl-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid #1A1620;padding-bottom:3px;}
.zl-kicker{font-size:.46rem;font-weight:800;letter-spacing:.14em;}
.zl-head b{font-size:.58rem;}
/* the interview. GLOSS speaks in sentence case and full words; she does not.
   everything pink on this page is her. */
.zl-strip{display:block;margin:9px 0 11px;}
.zl-strip img{display:block;width:100%;height:auto;filter:contrast(1.05) saturate(1.04);}
.zl-meet{margin:0;font-size:.54rem;font-weight:800;letter-spacing:.2em;color:#C9548E;}
.zl-name{margin:2px 0 6px;font-size:1.78rem;line-height:.9;font-weight:800;letter-spacing:-.03em;}
.zl-name span{font-size:.78rem;font-weight:600;letter-spacing:0;color:#6A6270;}
.zl-stand{margin:0 0 11px;font-size:.5rem;line-height:1.3;color:#6A6270;
  border-bottom:1px solid #D9D2C4;padding-bottom:7px;}
.zl-qa{margin:0;font-size:.5rem;line-height:1.42;}
.zl-qa dt{font-weight:800;color:#1A1620;margin-top:11px;}
.zl-qa dt:first-child{margin-top:0;}
.zl-qa dd{margin:3px 0 0;color:#3A3442;}
/* her pen is anchored to the words it is about, not to page coordinates — the old
   marks were positioned against the four-up grid and floated free once it went. */
.zl-qa dd{position:relative;}
.zl-circled{font-weight:inherit;position:relative;white-space:nowrap;}
.zl-circled::after{
  content:"";position:absolute;left:-7px;right:-8px;top:-8px;bottom:-7px;
  border:2px solid #C2417C;border-radius:54% 46% 44% 56%;transform:rotate(-2.5deg);opacity:.85;
}
.zl-hit{margin-bottom:6px;}
.zl-vitals{
  margin:15px 0 0;padding:8px 10px;background:#EFE9DA;border-left:3px solid #C9548E;
  display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:.46rem;line-height:1.25;
}
.zl-vitals dt{font-weight:800;letter-spacing:.1em;color:#C9548E;}
.zl-vitals dd{margin:0;color:#3A3442;}
.zl-foot{
  margin:16px 0 0;padding-top:9px;border-top:1px solid #D9D2C4;
  font-size:.46rem;font-weight:800;letter-spacing:.12em;color:#C9548E;
}
.zl-mark{
  position:absolute;font-family:'Reenie Beanie',cursive;color:#C2417C;font-size:.86rem;line-height:1;
}
.zl-inline{position:static;display:inline-block;margin-left:9px;vertical-align:baseline;}
.zl-m1{right:20px;top:158px;transform:rotate(-7deg);}
.zl-m2{transform:rotate(3deg);font-size:.82rem;letter-spacing:.02em;margin-left:15px;}
.zl-m3{transform:rotate(-5deg);}
.zl-m4{transform:rotate(-3deg);}

/* in flow, not absolute: at bottom:-30px this sat directly on the modal caption
   and the two texts rendered through each other. */
.zine-hand{
  margin:12px 0 2px;padding:0 4px;
  font-family:'Reenie Beanie',cursive;font-size:1.2rem;color:var(--pen);transform:rotate(-.4deg);
}
@media (max-width:700px){
  /* it sat across the notebook's lock and the lock covered its coverlines.
     the top-left of the room is the only clear ground at this width. */
  #zine{left:5%;top:1%;width:78px;
    --r:perspective(820px) rotateX(13deg) rotateZ(7deg) scale(1);
    transform:perspective(820px) rotateX(13deg) rotateZ(7deg) scale(1);}
  .zine-cover{height:102px;}
  .zc-mast{font-size:1.05rem;}
  .zine-open{flex-direction:column;margin-top:6px;}
  .zine-page{width:100%;}
  .zine-open::after{display:none;}
  /* stacked pages are short: bottom-anchored marginalia lands in the body copy,
     so on mobile she writes it under the paragraph instead of beside it */
  .zl-m2{position:static;display:block;margin-top:5px;transform:rotate(-2deg);}
  /* at 390 the sheet is the full width of the room: there is no lane the device can
     stand in without covering her handwriting. so while the notebook is open you have
     put it down on top of her. she comes back when you close it. desktop keeps her
     visible the whole time — measured 0 overlaps there. */
  body:has(#reader.on) #tama{z-index:35;}
}