@font-face{font-family:"Bubble Diary Pixel";src:url("品牌素材/中文像素字体.ttf") format("truetype");font-display:swap;unicode-range:U+2E80-2EFF,U+3000-303F,U+31C0-31EF,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FF00-FFEF}
@font-face{font-family:"Bubble Diary Pixel";src:url("品牌素材/英文像素字体.ttf") format("truetype");font-display:swap;unicode-range:U+0000-024F,U+2000-206F}
body.diary-active{overflow:hidden}
.diary{position:fixed;z-index:70;inset:0;display:none;min-height:100dvh;overflow:hidden;color:#eafcff;font-family:"Bubble Diary Pixel",ui-monospace,monospace;cursor:none}
.diary.is-visible{display:block}
.diary__background{position:absolute;inset:0;background:url("品牌素材/电脑端diary背景.png") center/cover no-repeat}
.diary__topbar{position:absolute;z-index:30;inset:max(13px,env(safe-area-inset-top)) 18px auto;display:grid;grid-template-columns:auto 1fr auto;align-items:start;pointer-events:none}
.diary__topbar>*{pointer-events:auto}.diary__top-actions{grid-column:3;display:flex;align-items:center;gap:10px}
.diary-control{display:grid;place-items:center;width:58px;aspect-ratio:1;border:1px solid rgba(211,250,255,.72);border-radius:50%;color:#effeff;background:radial-gradient(circle at 34% 24%,rgba(255,255,255,.9),rgba(112,213,248,.34) 40%,rgba(44,124,213,.3));box-shadow:inset 1px 1px 3px #fff,0 0 14px rgba(70,215,255,.42);cursor:inherit;transition:transform 180ms ease,filter 150ms ease}
.diary-control:hover,.diary-control:focus-visible{filter:brightness(1.14);transform:translateY(-2px) scale(1.04)}.diary-control:active{transform:translateY(2px) scale(.95)}
.diary-control--back{border:0;background:transparent;box-shadow:none}.diary-control--back img{width:124%;height:124%;max-width:none;object-fit:contain}.diary-control--music{position:relative}.diary-control--music .closet-control__note{font-size:20px}.diary-control--music.is-playing{filter:brightness(1.1) drop-shadow(0 0 8px #65dfff)}
.diary-id-status{min-height:38px;max-width:min(42vw,310px);padding:0 14px;border:1px solid rgba(179,236,255,.62);border-radius:6px;color:#eafdff;background:rgba(44,124,203,.5);box-shadow:inset 1px 1px 0 rgba(255,255,255,.72),0 0 11px rgba(79,211,255,.25);font:400 10px/1.2 "Bubble Diary Pixel",monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:inherit;transform-origin:50% 80%;transition:transform 140ms cubic-bezier(.2,.82,.2,1),box-shadow 140ms ease,filter 140ms ease}.diary-id-status.is-connected{color:#fff;text-shadow:0 0 7px #43d9ff}
.diary-machine{position:absolute;z-index:3;left:50%;bottom:0;width:min(67vw,880px);aspect-ratio:1312/1199;transform:translateX(-50%);transform-origin:50% 76%}
.diary-machine__body,.diary-machine__body img{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:contain}
.diary-balls{position:absolute;z-index:4;left:20%;right:20%;top:32%;bottom:34%;overflow:hidden}.diary-ball{position:absolute;left:var(--x);top:var(--y);width:var(--size);aspect-ratio:1;object-fit:contain;opacity:var(--opacity);transform:translate(-50%,-50%) rotate(var(--r));filter:drop-shadow(0 3px 4px rgba(20,90,180,.25))}
.diary-machine.is-shaking{animation:diaryMachineShake 3s ease-in-out both}.diary-machine.is-shaking .diary-ball{animation:diaryBallShake 430ms var(--delay) ease-in-out infinite alternate}.diary-machine.is-shaking .diary-knob.is-active img{animation:diaryKnobTurn 680ms cubic-bezier(.2,.85,.2,1) both}
.diary-knobs{position:absolute;z-index:10;left:18%;right:18%;top:69%;display:flex;justify-content:space-between;pointer-events:none}.diary-knob{display:grid;justify-items:center;width:20%;padding:0;border:0;color:#effdff;background:transparent;text-shadow:0 2px 2px #1557aa,0 0 9px #5ceaff;font:400 clamp(9px,1vw,13px)/1.15 "Bubble Diary Pixel",monospace;letter-spacing:.04em;cursor:inherit;pointer-events:auto}.diary-knob img{width:92%;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 0 7px rgba(79,224,255,.76));transition:filter 140ms ease,transform 180ms cubic-bezier(.2,.85,.2,1)}.diary-knob:hover img,.diary-knob:focus-visible img{filter:brightness(1.15) drop-shadow(0 0 13px #77ecff);transform:scale(1.06)}.diary-knob:active img{transform:rotate(30deg) scale(.94)}.diary-knob span{margin-top:-2px;white-space:nowrap}
.diary-write{position:absolute;z-index:25;right:clamp(20px,4vw,62px);bottom:clamp(18px,4vh,46px);display:grid;justify-items:center;width:clamp(82px,9vw,126px);padding:0;border:0;color:#fff;background:transparent;text-shadow:0 2px 2px #1455a2,0 0 8px #63dfff;font:400 11px/1 "Bubble Diary Pixel",monospace;cursor:inherit}.diary-write img{width:100%;filter:drop-shadow(0 0 10px rgba(78,218,255,.58));transition:transform 200ms cubic-bezier(.2,.85,.2,1),filter 160ms ease}.diary-write:hover img,.diary-write:focus-visible img{transform:translateY(-4px) scale(1.05);filter:brightness(1.12) drop-shadow(0 0 15px #5ee8ff)}.diary-write:active img{transform:translateY(2px) scale(.94)}
.diary-flash{position:absolute;z-index:80;inset:0;background:#f5feff;opacity:0;pointer-events:none}.diary-flash.is-active{animation:diaryFlash 460ms ease-out both}
.diary.is-revealing .diary-machine{filter:blur(3px) brightness(.88)}
.diary-reveal-bubble{position:absolute;z-index:40;left:50%;top:48%;display:grid;place-items:center;width:clamp(180px,22vw,300px);aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid rgba(220,252,255,.9);border-radius:50%;color:#fff;background:radial-gradient(circle at 35% 26%,rgba(255,255,255,.96) 0 5%,rgba(170,239,255,.44) 17%,rgba(38,163,243,.34) 66%,rgba(103,82,239,.28));box-shadow:inset 12px 12px 24px rgba(255,255,255,.4),inset -15px -17px 25px rgba(21,106,211,.2),0 0 28px rgba(88,224,255,.82);text-shadow:0 0 7px #178bd0;font:400 clamp(11px,1.1vw,15px)/1 "Bubble Diary Pixel",monospace;cursor:inherit;animation:diaryMemoryFloat 3.2s ease-in-out infinite}.diary-reveal-bubble[hidden]{display:none}.diary-reveal-bubble:hover{filter:brightness(1.12);transform:translate(-50%,-50%) scale(1.04)}
.diary-note{position:absolute;z-index:45;inset:0;display:grid;place-content:center;justify-items:center;padding:max(74px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom));background:rgba(67,151,224,.16);backdrop-filter:blur(3px)}.diary-note[hidden]{display:none}.diary-note__paper{position:relative;width:min(72vw,610px);aspect-ratio:1}.diary-note__paper>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.diary-note__paper>div{position:absolute;z-index:1;inset:20% 15% 13%;display:flex;flex-direction:column;color:#15568a;transform:rotate(-.3deg)}.diary-note time{font:400 10px/1.2 "Bubble Diary Pixel",monospace;letter-spacing:.06em}.diary-note p{margin:clamp(16px,3vw,30px) 0 0;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:500 clamp(16px,2vw,24px)/1.72 Arial,"PingFang SC",sans-serif}.diary-note__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:-7%}.diary-note__actions button,.diary-note__close,.diary-form button,.diary-dialog-actions button{min-height:42px;padding:0 18px;border:2px solid #148eb5;border-radius:5px;color:#075a82;background:linear-gradient(#c4fbff,#63dbe6);box-shadow:inset 2px 2px 0 #efffff,inset -2px -2px 0 #169abd,2px 3px 0 rgba(19,89,138,.28);font:400 11px/1 "Bubble Diary Pixel",monospace;cursor:inherit}.diary-note__actions button[data-action="capsule"]{color:#8b1b61;border-color:#ad1f70;background:linear-gradient(#ffc3e5,#f465ad)}.diary-note__close{margin-top:10px;font-size:9px;opacity:.9}
.diary-window{z-index:150}.diary-window .bubble-window__shell--panel{width:min(88vw,620px)}.diary-window .bubble-window__content{padding:clamp(16px,3vw,28px)}.diary-form{display:grid;gap:13px}.diary-form label{color:#146487;font-size:11px}.diary-form textarea{box-sizing:border-box;width:100%;min-height:210px;resize:vertical;padding:15px;border:2px solid #198fb3;border-radius:4px;color:#274d69;background:rgba(255,255,255,.88);box-shadow:inset 2px 2px 0 rgba(112,197,227,.38);font:500 16px/1.65 Arial,"PingFang SC",sans-serif;outline:none}.diary-form textarea:focus{box-shadow:inset 2px 2px 0 rgba(112,197,227,.38),0 0 0 3px rgba(76,220,238,.35)}.diary-form__count,.diary-form__status{min-height:16px;color:#146487;font-size:9px;text-align:right}.diary-form__status{text-align:center}.diary-empty{text-align:center;color:#16688e}.diary-empty strong{display:block;margin-bottom:12px;font-size:clamp(18px,3vw,28px)}.diary-dialog-actions{display:flex;justify-content:center;gap:10px;margin-top:18px}.diary-dialog-actions .is-danger{color:#8c1b5c;border-color:#a91c6b;background:linear-gradient(#ffd0e8,#f67eb8)}
@keyframes diaryMachineShake{0%,100%{translate:0 0;rotate:0deg}15%{translate:-5px 0;rotate:-.5deg}30%{translate:6px 0;rotate:.6deg}45%{translate:-4px 0;rotate:-.35deg}60%{translate:5px 0;rotate:.35deg}75%{translate:-2px 0;rotate:0deg}}
@keyframes diaryBallShake{from{transform:translate(-50%,-50%) rotate(var(--r)) translate3d(-7px,7px,0)}to{transform:translate(-50%,-50%) rotate(calc(var(--r) + 20deg)) translate3d(8px,-10px,0)}}
@keyframes diaryKnobTurn{0%{transform:rotate(0) scale(1)}55%{transform:rotate(128deg) scale(.94)}100%{transform:rotate(95deg) scale(1)}}
@keyframes diaryFlash{0%{opacity:0}34%{opacity:1}100%{opacity:0}}
@keyframes diaryMemoryFloat{0%,100%{margin-top:0}50%{margin-top:-8px}}
@media(max-width:700px) and (pointer:coarse){.diary{cursor:auto}.diary__background{background-image:url("品牌素材/手机端diary背景.png")}.diary__topbar{inset:max(8px,env(safe-area-inset-top)) 9px auto}.diary-control{width:46px}.diary__top-actions{gap:6px}.diary-id-status{max-width:44vw;min-height:34px;padding:0 8px;font-size:7px}.diary-machine{top:9.3dvh;bottom:auto;width:max(100vw,52.9dvh);height:94dvh;aspect-ratio:941/1672}.diary-balls{left:24%;right:24%;top:34%;bottom:42%}.diary-knobs{left:18%;right:18%;top:68.5%}.diary-knob{width:20%;font-size:7px}.diary-knob img{width:92%}.diary-write{right:10px;bottom:max(15px,env(safe-area-inset-bottom));width:76px;font-size:8px}.diary-reveal-bubble{top:45%;width:min(57vw,230px)}.diary-note{padding-top:max(62px,env(safe-area-inset-top));padding-bottom:max(10px,env(safe-area-inset-bottom))}.diary-note__paper{width:min(88vw,360px)}.diary-note__paper>div{inset:20% 17% 14%}.diary-note p{font-size:clamp(14px,4.2vw,18px);line-height:1.6}.diary-note__actions{margin-top:-6%;max-width:94vw}.diary-note__actions button{min-height:40px;padding:0 12px;font-size:9px}.diary-note__close{margin-top:6px}.diary-form textarea{min-height:190px;font-size:16px}}
@media(prefers-reduced-motion:reduce){.diary-machine.is-shaking{animation:diaryMachineShake 650ms ease-out both}.diary-machine.is-shaking .diary-ball{animation:none}.diary-reveal-bubble{animation:none}.diary-flash.is-active{animation-duration:220ms}}

/* Diary entry loading and final presentation corrections. */
.diary{opacity:0;transition:opacity 220ms ease}.diary.is-ready{opacity:1}.diary.is-preparing{visibility:hidden;pointer-events:none}
.diary__background{inset:-4px;background:url("品牌素材/电脑端diary背景.png") center/cover no-repeat;filter:blur(2.2px);transform:scale(1.012)}
.diary-ball{z-index:var(--layer);width:18.5%}
.diary-knobs{left:27%;right:27%;top:70.25%}.diary-knob{width:13%}.diary-knob img{width:100%}.diary-knob span{margin-top:2px}
.diary-note__paper>div{inset:19% 15% 15%;display:grid;place-items:center}.diary-note p{max-width:100%;max-height:100%;margin:0;text-align:center}
@media(max-width:700px) and (pointer:coarse){.diary__background{background-image:url("品牌素材/手机端diary背景.png");filter:blur(1.7px)}.diary-knobs{left:27%;right:27%;top:69.65%}.diary-knob{width:13%}.diary-knob img{width:100%}.diary-note__paper>div{inset:18% 17% 16%}}
@media(prefers-reduced-motion:reduce){.diary{transition:none}}

/* Diary registration correction — every value is local to .diary-machine. */
body.diary-active .home{visibility:hidden}
.diary__background{inset:-5px;background:url("品牌素材/电脑端diary背景.png") center/cover no-repeat;filter:blur(2px) saturate(.98);transform:scale(1.012);contain:paint}.diary__background::before,.diary__background::after{display:none}
.diary-machine{contain:layout paint;isolation:isolate}
.diary-machine__body{z-index:1}.diary-balls{z-index:3;left:28.5%;right:28.5%;top:34%;bottom:36%;overflow:hidden;contain:layout paint}.diary-ball{width:22%;will-change:auto}.diary-machine.is-shaking .diary-ball{will-change:transform}
.diary-knobs{z-index:10;inset:0;display:block;pointer-events:none}.diary-knob{position:absolute;width:13.5%;transform:translate(-50%,-50%);pointer-events:auto}.diary-knob--bubble{left:33.75%;top:77.1%}.diary-knob--mine{left:66.55%;top:77.25%}.diary-knob img{display:block;width:100%;height:auto;aspect-ratio:1292/1218}.diary-knob span{display:block;margin-top:7px;text-align:center}
.diary-write{right:clamp(86px,10vw,154px);bottom:clamp(68px,9vh,104px)}
.diary-note__actions,.diary-note__close{position:relative;z-index:2;pointer-events:auto}
.diary button:focus{outline:none}.diary button:focus-visible{outline:2px solid rgba(114,229,255,.96);outline-offset:3px;box-shadow:0 0 0 2px rgba(255,255,255,.72),0 0 15px rgba(67,213,255,.86)}
.diary button.diary-knob:focus-visible{outline:0;box-shadow:none}.diary button.diary-knob:focus-visible img{filter:brightness(1.12) drop-shadow(0 0 12px rgba(87,226,255,.9))}
.diary-window button,.diary-note__actions button,.diary-note__close{transform-origin:50% 80%;transition:transform 150ms cubic-bezier(.2,.82,.2,1),box-shadow 150ms ease,filter 150ms ease}
.diary .is-pressing{transform:translateY(3px) scale(.965)!important;filter:brightness(.98);box-shadow:inset 1px 1px 2px rgba(36,112,154,.2),0 1px 1px rgba(20,92,135,.2)!important}
.diary .is-releasing{animation:diaryButtonSpring 230ms cubic-bezier(.2,.85,.2,1)}
@keyframes diaryButtonSpring{0%{transform:translateY(2px) scale(.97)}48%{transform:translateY(-1px) scale(1.045)}100%{transform:none}}

@media(hover:hover) and (pointer:fine){
  .diary-window button:hover,.diary-note__actions button:hover,.diary-note__close:hover,.diary-id-status:hover{transform:translateY(-2px) scale(1.025);filter:brightness(1.06);box-shadow:inset 2px 2px 0 rgba(255,255,255,.95),inset -2px -2px 0 rgba(22,154,189,.82),0 5px 8px rgba(24,112,157,.24),0 0 12px rgba(78,220,245,.44)}
  .diary-window button.is-pressing:hover,.diary-note__actions button.is-pressing:hover,.diary-note__close.is-pressing:hover,.diary-id-status.is-pressing:hover{transform:translateY(3px) scale(.965)!important}
}

@media(max-width:700px) and (pointer:coarse){
  .diary__background{background-image:url("品牌素材/手机端diary背景.png");filter:blur(1.6px) saturate(.99)}
  .diary-balls{left:25%;right:25%;top:32%;bottom:40%}.diary-ball{width:27%}
  .diary-knob{width:18%}.diary-knob--bubble{left:26.55%;top:75.7%}.diary-knob--mine{left:74.4%;top:75.85%}.diary-knob span{margin-top:6px}
  .diary-write{right:clamp(44px,13vw,64px);bottom:max(66px,calc(env(safe-area-inset-bottom) + 48px))}
}
@media(prefers-reduced-motion:reduce){.diary .is-releasing{animation:none}.diary-window button,.diary-note__actions button,.diary-note__close{transition-duration:60ms}}

/* Final scene-only lo-fi image treatment. HUD and knob labels remain outside this filter stack. */
.diary__background,.diary-machine__body,.diary-chamber,.diary-machine__logo,.diary-write img{filter:blur(.12px) saturate(1.02) contrast(1.035) brightness(1.015)}
.diary-machine::after{content:none}
.diary::after{content:"";position:absolute;z-index:8;inset:-3px;pointer-events:none;opacity:.26;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='1' seed='37' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='.42 0 0 0 .36 0 .58 0 0 .58 0 0 .78 0 .78 0 0 0 .62 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:96px 96px;image-rendering:pixelated;mix-blend-mode:overlay}
.diary__topbar,.diary-knobs{filter:none}
@media(prefers-reduced-motion:reduce){.diary::after{opacity:.26}}

/* Final machine-local Y registration. X and rendered size intentionally remain unchanged. */
.diary-knob--bubble{top:77.55%}
.diary-knob--mine{top:77.72%}
@media(max-width:700px) and (pointer:coarse){
  .diary-knob--bubble{top:76.12%}
  .diary-knob--mine{top:76.3%}
}

/* Diary v9 — current formal assets and machine-local registration. */
.diary-id-status{
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  text-shadow:0 0 8px rgba(83,220,255,.48);
}
.diary-id-status.is-connected{background:transparent;box-shadow:none}
.diary-machine__logo{
  position:absolute;
  z-index:2;
  left:50%;
  top:-.5%;
  display:block;
  width:32%;
  height:auto;
  transform:translateX(-50%);
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 2px 0 rgba(38,105,193,.34)) drop-shadow(0 0 7px rgba(255,255,255,.54));
}
.diary-glass-reflection-chamber{
  position:absolute;
  z-index:6;
  left:17.3%;
  top:29.8%;
  width:65.4%;
  height:34%;
  overflow:hidden;
  pointer-events:none;
}
.diary-glass-reflection-chamber img{
  position:absolute;
  left:-26.45%;
  top:-87.65%;
  display:block;
  width:152.91%;
  height:auto;
  max-width:none;
  object-fit:contain;
}
.diary-knob--bubble{top:78.05%}
.diary-knob--mine{top:78.18%}
.diary-knob span{
  position:absolute;
  left:50%;
  bottom:calc(100% + 5px);
  width:max-content;
  margin:0;
  transform:translateX(-50%);
  line-height:1;
}
.diary-write{
  position:absolute;
  z-index:12;
  left:50%;
  top:86.6%;
  right:auto;
  bottom:auto;
  width:6.8%;
  min-width:42px;
  transform:translateX(-50%);
  font-size:9px;
  line-height:1;
}
.diary-write img{display:block;width:100%;height:auto;object-fit:contain}
.diary-write span{display:block;margin-top:-4px}
.diary-browse{
  position:absolute;
  z-index:13;
  left:50%;
  top:14.2%;
  width:10.5%;
  aspect-ratio:1;
  padding:0;
  border:0;
  background:transparent;
  transform:translate(-50%,-50%);
  cursor:inherit;
}
.diary-browse img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 7px rgba(92,225,255,.45));transition:transform 150ms cubic-bezier(.2,.85,.2,1),filter 150ms ease}
.diary-browse:hover img,.diary-browse:focus-visible img{transform:translateY(-2px) scale(1.045);filter:brightness(1.1) drop-shadow(0 0 11px rgba(92,225,255,.8))}
.diary-browse:active img{transform:translateY(2px) scale(.95)}
.diary-note__paper{cursor:inherit;transition:transform 300ms cubic-bezier(.2,.78,.2,1),opacity 260ms ease}
.diary-note.is-turning .diary-note__paper{opacity:.18;transform:translate(-22px,-4px) rotate(-1deg) scale(.985)}
.diary-note__page{align-self:center;min-width:54px;color:#f1feff;text-align:center;text-shadow:0 1px 2px #1767a9,0 0 7px #61dfff;font:400 9px/1 "Bubble Diary Pixel",monospace}
@media(hover:hover) and (pointer:fine){
  .diary-id-status:hover{
    box-shadow:none;
    filter:brightness(1.12) drop-shadow(0 0 7px rgba(73,216,255,.65));
    text-shadow:0 0 10px rgba(83,220,255,.82);
  }
}

@media(max-width:700px){
  .diary__background{inset:0;transform:none;filter:blur(1.6px) saturate(.99)}
  .diary-machine{
    left:calc(50% + max(4.25vw,2.39dvh));
    top:calc(50% + max(15.94vw,8.97dvh));
    bottom:auto;
    width:max(100vw,56.28dvh);
    height:auto;
    aspect-ratio:941/1672;
    transform:translate(-50%,-50%);
  }
  .diary-machine__body,.diary-machine__body img{object-fit:cover}
  .diary-machine__logo{top:5.2%;width:38%}
  .diary-browse{top:17.15%;width:10.5%}
  .diary-balls{left:23%;right:23%;top:34%;bottom:36%}
  .diary-ball{width:22%}
  .diary-ball:nth-child(1){--x:8%;--y:88%}.diary-ball:nth-child(2){--x:22%;--y:85%}.diary-ball:nth-child(3){--x:36%;--y:89%}.diary-ball:nth-child(4){--x:50%;--y:85%}.diary-ball:nth-child(5){--x:64%;--y:89%}.diary-ball:nth-child(6){--x:78%;--y:85%}.diary-ball:nth-child(7){--x:92%;--y:88%}
  .diary-ball:nth-child(8){--x:14%;--y:69%}.diary-ball:nth-child(9){--x:29%;--y:72%}.diary-ball:nth-child(10){--x:44%;--y:67%}.diary-ball:nth-child(11){--x:59%;--y:72%}.diary-ball:nth-child(12){--x:74%;--y:67%}.diary-ball:nth-child(13){--x:88%;--y:71%}
  .diary-ball:nth-child(14){--x:22%;--y:52%}.diary-ball:nth-child(15){--x:40%;--y:55%}.diary-ball:nth-child(16){--x:58%;--y:50%}.diary-ball:nth-child(17){--x:77%;--y:54%}
  .diary-ball:nth-child(18){--x:34%;--y:37%}.diary-ball:nth-child(19){--x:52%;--y:33%}.diary-ball:nth-child(20){--x:69%;--y:39%}
  .diary-glass-reflection-chamber{left:22.8%;top:31%;width:54%;height:31.5%}
  .diary-glass-reflection-chamber img{inset:0;width:100%;height:100%;object-fit:contain}
  .diary-knob--bubble{left:27.4%;top:76.55%}
  .diary-knob--mine{left:72.7%;top:76.62%}
  .diary-knob span{bottom:calc(100% + 3px);font-size:8px}
  .diary-write{left:50%;top:84.4%;width:8.2%;min-width:30px;font-size:7px}
  .diary-write span{margin-top:-2px}
  .diary-control--back{width:50px}
  .diary-control--back img{width:138%;height:138%}
}

/* Diary v15 — one machine-local coordinate system for every machine overlay. */
.diary-machine{
  left:50%;
  top:auto;
  bottom:4.8svh;
  width:93.1svh;
  max-width:none;
  height:auto;
  aspect-ratio:1312/1199;
  transform:translateX(-50%);
  transform-origin:50% 76%;
  contain:layout paint;
}
.diary-machine__body,.diary-machine__body img{inset:0;width:100%;height:100%;object-fit:contain}
.diary-chamber{
  position:absolute;
  z-index:3;
  left:28.2%;
  top:32.9%;
  width:43.6%;
  height:29.8%;
  overflow:hidden;
  clip-path:inset(0 round 1.5%);
  contain:layout paint;
  pointer-events:none;
}
.diary-chamber .diary-balls{position:absolute;z-index:1;inset:0;overflow:hidden;contain:layout paint}
.diary-chamber .diary-ball{left:var(--x);top:var(--y);width:21.5%}
.diary-chamber .diary-glass-reflection-chamber{position:absolute;z-index:2;inset:0;width:100%;height:100%;overflow:hidden}
.diary-chamber .diary-glass-reflection-chamber img{
  position:absolute;
  left:-64.68%;
  top:-110.4%;
  width:229.36%;
  height:auto;
  max-width:none;
  object-fit:contain;
}
.diary-knobs{z-index:10;inset:0}
.diary-knob{width:14.1%}
.diary-knob--bubble{left:33.55%;top:77.3%}
.diary-knob--mine{left:66.85%;top:77.42%}
.diary-knob span{bottom:calc(100% + 8px)}
.diary-write{left:50%;top:85.35%;width:10.2%;min-width:54px}
.diary-write span{margin-top:3px}
.diary-browse{top:18.1%;width:4.8%}

@media(max-width:700px) and (pointer:coarse){
  .diary__background{inset:0;transform:none;background-position:center;background-size:cover}
  .diary-machine{
    left:50%;
    top:50%;
    bottom:auto;
    width:var(--diary-machine-width,max(100vw,56.28dvh));
    height:var(--diary-machine-height,max(100dvh,177.68vw));
    aspect-ratio:941/1672;
    transform:translate(-50%,-50%);
  }
  .diary-machine__body,.diary-machine__body img{width:100%;height:100%;object-fit:contain}
  .diary-machine__body{visibility:hidden}
  .diary-machine__logo{top:5.4%;width:36%}
  .diary-browse{top:21.1%;width:5.2%}
  .diary-chamber{left:18.2%;top:41.2%;width:63.6%;height:23.9%;clip-path:inset(0 round 1%)}
  .diary-chamber .diary-ball{left:var(--mx);top:var(--my);width:17.8%}
  .diary-chamber .diary-glass-reflection-chamber img{inset:0;width:100%;height:100%;object-fit:cover}
  .diary-knob{width:19.2%}
  .diary-knob--bubble{left:28.05%;top:77.82%}
  .diary-knob--mine{left:72.55%;top:77.82%}
  .diary-knob span{bottom:calc(100% + 28px);font-size:8px}
  .diary-write{left:50%;top:83.75%;width:12%;min-width:40px;font-size:7px}
  .diary-write span{margin-top:3px}
}

@media(max-width:700px) and (pointer:fine){
  .diary-machine{width:93.1svh;bottom:4.8svh}
}

/* Diary v16 — registration reset. Geometry is authored only by diary.js. */
.diary__background{
  inset:0;
  background-position:center;
  background-size:cover;
  transform:none;
}
.diary-machine{
  left:var(--diary-machine-x,0);
  top:var(--diary-machine-y,0);
  bottom:auto;
  width:var(--diary-machine-width,866px);
  height:var(--diary-machine-height,803px);
  max-width:none;
  aspect-ratio:auto;
  transform:none;
  translate:0 0;
  rotate:0deg;
}
.diary-machine__body,
.diary-machine__body img{
  visibility:visible;
  width:100%;
  height:100%;
  object-fit:fill;
  filter:none;
  transform:none;
}
.diary-knob{width:16.5%}
.diary-knob--bubble{left:33.75%;top:77.25%}
.diary-knob--mine{left:66.52%;top:77.25%}

@media(max-width:700px) and (pointer:coarse){
  .diary-machine{
    left:var(--diary-machine-x,0);
    top:var(--diary-machine-y,0);
    bottom:auto;
    width:var(--diary-machine-width,877px);
    height:var(--diary-machine-height,1505px);
    aspect-ratio:auto;
    transform:none;
  }
  .diary-machine__body,
  .diary-machine__body img{visibility:visible;object-fit:fill}
  .diary-knob{width:21.5%}
  .diary-knob--bubble{left:27.9%;top:76.9%}
  .diary-knob--mine{left:72.54%;top:76.9%}
}

@media(max-width:700px) and (pointer:fine){
  .diary-machine{
    left:var(--diary-machine-x,0);
    top:var(--diary-machine-y,0);
    bottom:auto;
    width:var(--diary-machine-width,866px);
    height:var(--diary-machine-height,803px);
    transform:none;
  }
}

/* Diary v18 — target-composite chamber, pile and mobile controls. */
.diary-chamber{
  left:17.3%;
  top:29.8%;
  width:65.4%;
  height:34%;
  overflow:hidden;
  clip-path:inset(0 round 1.5%);
}
.diary-chamber .diary-ball{
  left:var(--x);
  top:var(--y);
  width:calc(19% * var(--s,1));
}
.diary-chamber .diary-glass-reflection-chamber{
  position:absolute;
  z-index:2;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  pointer-events:none;
}
.diary-chamber .diary-glass-reflection-chamber img{
  position:absolute;
  left:-26.45%;
  top:-87.65%;
  width:152.91%;
  height:auto;
  max-width:none;
  object-fit:contain;
  filter:none;
  opacity:1;
}
.diary-browse{width:6.2%}

@media(pointer:fine){
  .diary-chamber .diary-glass-reflection-chamber{
    inset:0;
    width:100%;
    height:100%;
    background:transparent;
    border:0;
    outline:0;
    box-shadow:none;
    filter:none;
    backdrop-filter:none;
    -webkit-mask-image:
      linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%),
      linear-gradient(to bottom,transparent 0,#000 8%,#000 88%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:
      linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%),
      linear-gradient(to bottom,transparent 0,#000 8%,#000 88%,transparent 100%);
    mask-composite:intersect;
  }
  .diary-chamber .diary-glass-reflection-chamber::before,
  .diary-chamber .diary-glass-reflection-chamber::after{content:none}
  .diary-chamber .diary-glass-reflection-chamber img{
    left:-26.45%;
    top:-87.65%;
    width:152.91%;
  }
}

@keyframes diaryMachineShakeMobile{
  0%,100%{translate:0 0;rotate:0deg}
  12%{translate:-1px .5px;rotate:-.08deg}
  24%{translate:1.5px -.5px;rotate:.1deg}
  36%{translate:-1.5px 0;rotate:-.1deg}
  48%{translate:1px .5px;rotate:.08deg}
  60%{translate:-1px -.5px;rotate:-.06deg}
  72%{translate:1.5px 0;rotate:.08deg}
  84%{translate:-.5px .5px;rotate:-.04deg}
}

@media(max-width:700px) and (pointer:coarse){
  .diary-chamber{
    left:10%;
    top:31.2%;
    width:80%;
    height:34.6%;
    clip-path:inset(0 round 1%);
  }
  .diary-chamber .diary-ball{
    left:var(--mx);
    top:var(--my);
    width:calc(20% * var(--ms,1));
  }
  .diary-chamber .diary-glass-reflection-chamber img{
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .diary-knob--bubble{left:25.8%;top:75.75%}
  .diary-knob--mine{left:74.65%;top:75.75%}
  .diary-knob span{bottom:calc(100% + 8px)}
  .diary-browse{top:18.5%;width:7.2%}
  .diary-machine.is-shaking{animation-name:diaryMachineShakeMobile}
}

/* Keep the final authored registration intact while applying the lo-fi treatment at the end of the cascade. */
.diary__background{filter:blur(.42px) saturate(1.02) contrast(1.035) brightness(1.015)}
.diary-machine__body,.diary-chamber,.diary-machine__logo{filter:blur(.12px) saturate(1.02) contrast(1.035) brightness(1.015)}
.diary-write img{filter:blur(.1px) saturate(1.02) contrast(1.03) brightness(1.015) drop-shadow(0 0 10px rgba(78,218,255,.58))}
.diary__topbar,.diary-knobs,.diary-knob span{filter:none}
@media(max-width:700px){.diary__background{filter:blur(.32px) saturate(1.02) contrast(1.035) brightness(1.015)}}