:root{--paper:#f2f2ef;--ink:#242522;--art:#808386;--blue:#1834d4;--guide:#b8bab8;--frame:#8c908e;--faint-blue:#b0bada;--ochre:#b19b67;--ease:cubic-bezier(.22,1,.36,1);--app-width:440px;--nav-height:72px;color-scheme:light;font-family:'Times New Roman','Noto Serif SC','Songti SC',SimSun,serif;color:var(--ink);background:#e6e7e3}
*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:2px solid var(--blue);outline-offset:4px}button:disabled{opacity:.5;cursor:wait}button{-webkit-tap-highlight-color:transparent}::selection{color:#fff;background:var(--blue)}[hidden]{display:none!important}em{font-style:italic}p,h1,h2{margin:0}button{border:0;background:transparent}a{color:var(--blue);text-underline-offset:4px}*{scrollbar-width:thin;scrollbar-color:#b5b8b5 var(--paper)}
.app{width:min(100%,var(--app-width));min-height:100svh;margin:auto;background:var(--paper);position:relative;container-type:inline-size;isolation:isolate}.app:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.035;background-image:url('assets/04-paper.png');background-size:160% auto;z-index:-1}main{padding-bottom:calc(var(--nav-height) + env(safe-area-inset-bottom))}.view{position:relative}.view.entering{animation:page-in .52s var(--ease)}@keyframes page-in{from{opacity:.35;clip-path:inset(0 0 12% 0);transform:translateY(9px)}to{opacity:1;clip-path:inset(0);transform:translateY(0)}}
.canvas{position:relative;width:100%;aspect-ratio:390/764;font-size:max(8px, round(nearest, calc((3.05cqw) * var(--type-scale, 1)), 4px))}.geometry{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.top-rule{position:absolute;top:3.3%;left:5.5%;width:89%;border-top:.6px solid var(--ink)}.masthead{position:absolute;left:5.5%;top:5.8%;width:47%}.masthead h1{font-size:max(8px, round(nearest, calc((6.1cqw) * var(--type-scale, 1)), 4px));font-weight:400;line-height:.97;letter-spacing:-.035em;margin-left:12%;white-space:nowrap}.masthead h1 span{padding-left:0}.bracket{position:absolute;font-size:max(8px, round(nearest, calc((6.2cqw) * var(--type-scale, 1)), 4px));top:0;left:0}.closing{position:absolute;font-size:max(8px, round(nearest, calc((6.2cqw) * var(--type-scale, 1)), 4px));right:1%;top:24%}.masthead p{margin:7% 0 0 12%;font-size:max(8px, round(nearest, calc((4.5cqw) * var(--type-scale, 1)), 4px));letter-spacing:.08em}.masthead p i{font-style:normal}.edition{position:absolute;right:5.5%;top:5.8%;width:22%;font-size:max(8px, round(nearest, calc((2.3cqw) * var(--type-scale, 1)), 4px));line-height:1.14}.edition em{display:block;font-size:max(8px, round(nearest, calc((1.85cqw) * var(--type-scale, 1)), 4px));line-height:1.2;margin-top:10%}.edition b{display:block;font-size:max(8px, round(nearest, calc((2cqw) * var(--type-scale, 1)), 4px));font-weight:400;margin-top:10%;color:var(--guide)}.intro{position:absolute;left:5.5%;top:17.2%;font-size:max(8px, round(nearest, calc((3.05cqw) * var(--type-scale, 1)), 4px));line-height:1.5}.intro p{border-bottom:.5px solid var(--guide);width:95%}.intro span{font-size:max(8px, round(nearest, calc((3.35cqw) * var(--type-scale, 1)), 4px));line-height:1.25}.index-marker{position:absolute;left:53.8%;top:13.7%;text-align:center;line-height:1.3;font-size:max(8px, round(nearest, calc((2.2cqw) * var(--type-scale, 1)), 4px))}.index-marker span{color:var(--guide)}.categories{position:absolute;right:5.5%;top:12%;width:15.5%;display:flex;gap:1.15cqw;flex-direction:column}.categories button{position:relative;border:.7px solid var(--ink);border-radius:99px;padding:1px 2.7cqw 1px 1.3cqw;text-align:left;font-size:max(8px, round(nearest, calc((2.6cqw) * var(--type-scale, 1)), 4px));line-height:1.1;white-space:nowrap;min-height:4cqw;transition:background .2s,color .2s}.categories button:after{content:'';position:absolute;inset:-4px -2px}.categories i{position:absolute;right:1.05cqw;top:50%;width:.8cqw;height:.8cqw;border-radius:50%;background:currentColor;transform:translateY(-50%)}.categories button[aria-pressed=true]{color:var(--paper);background:var(--blue);border-color:var(--blue)}
.quote{position:absolute;top:23%;left:7%;width:27%;height:6.6%;border:.6px dashed var(--frame);padding:3% 3%;font-size:max(8px, round(nearest, calc((1.9cqw) * var(--type-scale, 1)), 4px));line-height:1.35}.quote>span:last-child{display:block;margin-top:1cqw;color:var(--frame)}.blue-node{position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;background:var(--blue)}
.specimen{position:absolute}.specimen h2{font-weight:400;font-size:max(8px, round(nearest, calc((4.1cqw) * var(--type-scale, 1)), 4px));line-height:1.1;letter-spacing:.035em;height:6cqw}.specimen-field{position:relative}.local-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.art{position:absolute;inset:0;pointer-events:none}.layer{position:absolute;overflow:visible;transform-origin:center;will-change:auto}.layer svg{width:100%;height:100%;display:block;overflow:visible}.layer.neutral{opacity:.68;mix-blend-mode:multiply}.layer.bird{filter:saturate(1.3);z-index:6}.layer.thread{z-index:5}.layer.thread path{stroke:var(--blue);stroke-width:1;fill:none;stroke-linecap:round}.replacement{width:82%;height:82%;left:9%;top:9%;position:absolute;object-fit:contain;mix-blend-mode:multiply}.hit-area{position:absolute;inset:-4px;z-index:7;border-radius:2px}.hit-area:focus-visible{outline-offset:6px}.caption{font-size:max(8px, round(nearest, calc((3.05cqw) * var(--type-scale, 1)), 4px));margin-top:1.25cqw;line-height:1.2;white-space:nowrap}.specimen.is-current h2{color:var(--blue)}.specimen-field:hover .art{transform:translateY(-2px)}.art{transition:transform .32s var(--ease)}
.signal{left:55.3%;top:21.5%;width:33%}.signal .specimen-field{aspect-ratio:130/172}.signal-note{position:absolute;left:93%;top:29%;font-size:max(8px, round(nearest, calc((1.8cqw) * var(--type-scale, 1)), 4px));line-height:1.3;width:6%}.signal-note>span{letter-spacing:.12em}.signal-note em{display:block;margin-top:3.2cqw;font-size:max(8px, round(nearest, calc((1.75cqw) * var(--type-scale, 1)), 4px));line-height:1.35;transform:translateX(-1.5cqw)}.signal-note b{font-weight:400;color:var(--guide)}.touch{left:10.8%;top:36.4%;width:35.4%}.touch .specimen-field{aspect-ratio:138/230}.vertical-note{position:absolute;top:43.8%;left:5.3%;writing-mode:vertical-rl;transform:rotate(180deg);font-size:max(8px, round(nearest, calc((1.9cqw) * var(--type-scale, 1)), 4px))}.vertical-note span{margin-top:3cqw}.middle-note{position:absolute;left:60%;top:50.3%;font-size:max(8px, round(nearest, calc((1.95cqw) * var(--type-scale, 1)), 4px));line-height:1.35}.middle-note span{display:block;color:var(--guide);margin-top:1.4cqw}.echo{left:60.5%;top:57%;width:31.8%}.echo .specimen-field{aspect-ratio:126/116}.echo-note{position:absolute;left:93.3%;top:69.5%;font-size:max(8px, round(nearest, calc((1.65cqw) * var(--type-scale, 1)), 4px));line-height:1.25}.echo-note span{display:block;color:var(--guide)}.within{left:10.8%;top:73.9%;width:38.5%}.within .specimen-field{aspect-ratio:150/112}.within .caption{margin-left:25%}.blue-note{position:absolute;left:49%;top:83%;font-size:max(8px, round(nearest, calc((2.1cqw) * var(--type-scale, 1)), 4px));line-height:1.35;color:var(--blue)}.blue-note>span{display:block;margin-top:1cqw;color:var(--guide)}.blue-note i{position:absolute;right:-3.7cqw;bottom:-2cqw;width:6cqw;height:6cqw;border-right:.7px solid var(--ink);border-bottom:.7px solid var(--ink)}.listening{position:absolute;left:75.8%;top:84.2%;width:15.6%;padding:1.2cqw 2cqw 1.2cqw 1.4cqw;border:.7px solid var(--ink);border-radius:99px;white-space:nowrap;font-size:max(8px, round(nearest, calc((2.05cqw) * var(--type-scale, 1)), 4px));line-height:1}.listening:after{content:'';position:absolute;inset:-7px}.listening i{display:inline-block;width:1.1cqw;height:1.1cqw;background:var(--blue);border-radius:50%;margin-left:1cqw}.paper-text{position:absolute;font-size:max(8px, round(nearest, calc((2.2cqw) * var(--type-scale, 1)), 4px));line-height:1.15;transform:rotate(-13deg);color:var(--ink);z-index:3}
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,var(--app-width));height:calc(var(--nav-height) + env(safe-area-inset-bottom));padding:0 4.5% env(safe-area-inset-bottom);background:var(--paper);display:grid;grid-template-columns:1fr 20px 1fr 20px 1fr;align-items:center;z-index:100;isolation:isolate}.bottom-nav:before{content:'';position:absolute;top:0;left:5.5%;right:5.5%;border-top:.6px solid var(--ink)}.bottom-nav button{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;height:65px;min-width:60px;z-index:1}.bottom-nav span{font-size:max(8px, round(nearest, calc((14px) * var(--type-scale, 1)), 4px));line-height:1}.bottom-nav small{font-size:max(8px, round(nearest, calc((12px) * var(--type-scale, 1)), 4px));line-height:1.1;font-weight:400}.bottom-nav>i{font-size:max(8px, round(nearest, calc((17px) * var(--type-scale, 1)), 4px));text-align:center;font-style:normal}.bottom-nav svg{position:absolute;width:60px;height:65px;inset:0;margin:auto;opacity:0;transition:opacity .25s,transform .4s var(--ease);transform:scale(.85);z-index:-1;overflow:visible}.bottom-nav path{fill:none;stroke:var(--ink);stroke-width:.7}.bottom-nav circle{fill:var(--blue)}.bottom-nav button[aria-current=page] svg{opacity:1;transform:scale(1)}
.inner-view{padding:28px 26px;min-height:calc(100svh - var(--nav-height));font-family:Georgia,'Songti SC',SimSun,serif}.page-heading{border-top:.7px solid var(--ink);padding-top:18px}.page-heading>p{font-size:max(8px, round(nearest, calc((11px) * var(--type-scale, 1)), 4px));letter-spacing:.14em}.page-heading h1{font-size:max(8px, round(nearest, calc((40px) * var(--type-scale, 1)), 4px));font-weight:400;line-height:1.05;letter-spacing:-.035em;margin:24px 0 18px}.page-heading>span{font-size:max(8px, round(nearest, calc((14px) * var(--type-scale, 1)), 4px));line-height:1.8}.local-note{font-size:max(8px, round(nearest, calc((11px) * var(--type-scale, 1)), 4px));line-height:1.6;color:#626561;margin:34px 0 20px}.talk-orbit{position:absolute;right:18px;top:140px;width:130px;height:180px;border:.6px solid var(--guide);border-left-color:transparent;border-radius:50%;pointer-events:none;z-index:-1}.entries{display:flex;flex-direction:column;gap:22px}.entry{padding:14px 0;border-top:.7px dashed var(--guide)}.entry time{font-size:max(8px, round(nearest, calc((10px) * var(--type-scale, 1)), 4px));color:#656761}.entry p{font-size:max(8px, round(nearest, calc((15px) * var(--type-scale, 1)), 4px));line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere;margin-top:8px}.entry button{margin-top:7px;color:#656761;font-size:max(8px, round(nearest, calc((11px) * var(--type-scale, 1)), 4px));padding:8px 0}.empty-entry{font-style:italic;font-size:max(8px, round(nearest, calc((17px) * var(--type-scale, 1)), 4px));line-height:1.5;margin:30px 0 40px}#draft-form{margin-top:30px}#draft-form label{font-size:max(8px, round(nearest, calc((13px) * var(--type-scale, 1)), 4px));display:block;margin-bottom:12px}textarea{width:100%;resize:vertical;border:.7px solid var(--frame);background:transparent;border-radius:0;padding:14px;line-height:1.8;font-size:max(8px, round(nearest, calc((15px) * var(--type-scale, 1)), 4px));caret-color:var(--blue)}textarea::placeholder{color:#686b66}.form-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}.form-footer>span{font-size:max(8px, round(nearest, calc((10px) * var(--type-scale, 1)), 4px));color:#656761}.text-button{font-size:max(8px, round(nearest, calc((13px) * var(--type-scale, 1)), 4px));padding:12px 0;color:var(--blue);text-decoration:underline;text-underline-offset:5px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:.7px solid var(--guide);padding:22px 0}.setting-row:first-of-type{margin-top:34px}.setting-row h2,.asset-settings h2{font-size:max(8px, round(nearest, calc((16px) * var(--type-scale, 1)), 4px));font-weight:400}.setting-row p,.asset-settings>p{font-size:max(8px, round(nearest, calc((12px) * var(--type-scale, 1)), 4px));color:#646762;line-height:1.8;margin-top:7px}.toggle{padding:3px;width:38px;height:22px;border:.8px solid var(--ink);border-radius:30px;flex-shrink:0}.toggle span{display:block;width:14px;height:14px;background:#777;border-radius:50%;transition:transform .25s,background .25s}.toggle[aria-checked=true] span{background:var(--blue);transform:translateX(15px)}.asset-settings{border-top:.7px solid var(--guide);padding-top:25px}.asset-row{display:grid;grid-template-columns:32px 1fr auto auto;gap:8px;align-items:center;padding:16px 0;border-bottom:.7px dashed var(--guide);font-size:max(8px, round(nearest, calc((12px) * var(--type-scale, 1)), 4px))}.asset-row>span{font-size:max(8px, round(nearest, calc((10px) * var(--type-scale, 1)), 4px))}.asset-row label,.asset-row button{cursor:pointer;font-size:max(8px, round(nearest, calc((12px) * var(--type-scale, 1)), 4px));padding:9px 4px}.asset-row label{color:var(--blue);text-decoration:underline;text-underline-offset:4px}.file-input{position:absolute;clip-path:inset(50%);width:1px;height:1px}.asset-row:focus-within label{outline:1px solid var(--blue);outline-offset:2px}#settings-status{font-size:max(8px, round(nearest, calc((12px) * var(--type-scale, 1)), 4px));line-height:1.7;margin-top:16px;color:#646762}
dialog{border:.7px solid var(--frame);background:var(--paper);padding:30px;max-width:calc(100% - 32px);width:370px;color:var(--ink)}dialog::backdrop{background:#272b3055;backdrop-filter:blur(3px)}dialog[open]{animation:detail-in .4s var(--ease)}@keyframes detail-in{from{opacity:0;transform:translateY(14px);clip-path:inset(12% 0 0)}to{opacity:1;transform:translateY(0);clip-path:inset(0)}}.close-dialog{position:absolute;right:12px;top:9px;font-size:max(8px, round(nearest, calc((24px) * var(--type-scale, 1)), 4px));width:40px;height:40px}#detail-number{font-size:max(8px, round(nearest, calc((13px) * var(--type-scale, 1)), 4px));margin-bottom:12px}dialog h2{font-size:max(8px, round(nearest, calc((29px) * var(--type-scale, 1)), 4px));font-weight:400}#detail-art{width:230px;height:260px;position:relative;margin:20px auto}#detail-art .art{inset:0}#detail-copy{font-size:max(8px, round(nearest, calc((14px) * var(--type-scale, 1)), 4px));line-height:1.8}#toast{position:fixed;z-index:500;bottom:95px;left:50%;transform:translate(-50%,10px);padding:10px 18px;background:var(--ink);color:var(--paper);font-size:max(8px, round(nearest, calc((13px) * var(--type-scale, 1)), 4px));opacity:0;pointer-events:none;transition:.25s;max-width:90%;white-space:nowrap}#toast.visible{opacity:1;transform:translate(-50%,0)}
.canvas{min-height:calc(100svh - var(--nav-height) - env(safe-area-inset-bottom))}.edition>span{white-space:nowrap;font-size:max(8px, round(nearest, calc((2.05cqw) * var(--type-scale, 1)), 4px))}.edition em{font-size:max(8px, round(nearest, calc((1.7cqw) * var(--type-scale, 1)), 4px))}.categories{top:12.4%}.quote,.middle-note,.vertical-note{font-size:max(8px, round(nearest, calc((max(7px,1.9cqw)) * var(--type-scale, 1)), 4px))}.signal-note,.signal-note em,.echo-note{font-size:max(8px, round(nearest, calc((max(6.5px,1.7cqw)) * var(--type-scale, 1)), 4px))}.blue-note{font-size:max(8px, round(nearest, calc((max(8px,2.1cqw)) * var(--type-scale, 1)), 4px))}
.no-guides .geometry,.no-guides .local-lines{opacity:0}.geometry,.local-lines{transition:opacity .3s}.reduced-motion *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
@media(min-width:700px){:root{--app-width:min(440px,calc((100svh - 24px)*390/836));--nav-height:66px}.app{margin:12px auto;min-height:calc(100svh - 24px);box-shadow:0 12px 40px #2028200a;outline:1px solid #d4d6d0}.canvas{min-height:calc(100svh - 90px)}.bottom-nav{bottom:12px;padding-left:14px;padding-right:14px}.bottom-nav button{height:60px}.bottom-nav svg{width:55px;height:60px}.bottom-nav span{font-size:max(8px, round(nearest, calc((12px) * var(--type-scale, 1)), 4px))}.bottom-nav small{font-size:max(8px, round(nearest, calc((10px) * var(--type-scale, 1)), 4px))}.inner-view{min-height:calc(100svh - 90px)}}
@media(max-width:360px){:root{--nav-height:68px}.bottom-nav span{font-size:max(8px, round(nearest, calc((12px) * var(--type-scale, 1)), 4px))}.bottom-nav small{font-size:max(8px, round(nearest, calc((11px) * var(--type-scale, 1)), 4px))}.inner-view{padding:24px 20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}