/* AOZORA ARG — test-only shared system UI, code-only design pass */
:root{
  --ao-sky:#9fdcf5;--ao-sky2:#eaf9ff;--ao-blue:#2f789a;--ao-deep:#244451;
  --ao-line:#76aeca;--ao-line-dark:#4c7f98;--ao-paper:#f9fdff;--ao-ink:#355f73;
  --ao-ok:#74b86a;--ao-warn:#edae4a;--ao-error:#d76b73;--ao-off:#8298a2;
}
/* 1, 3, 4, 8: shared visual language */
.ao-system-id{display:flex;align-items:center;gap:7px;margin:0 0 5px;padding:0 3px;color:#758e9a;font:700 10px/1.4 "DotGothic16",monospace;letter-spacing:.12em;text-transform:uppercase}
.ao-system-id::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ao-off);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.ao-system-id[data-state="active"]::before{background:var(--ao-warn);box-shadow:0 0 7px rgba(237,174,74,.75)}
.ao-system-id[data-state="ok"]::before{background:var(--ao-ok);box-shadow:0 0 7px rgba(116,184,106,.7)}
.ao-system-id[data-state="error"]::before{background:var(--ao-error);box-shadow:0 0 7px rgba(215,107,115,.72)}
.arg-system-box{position:relative;border:2px solid var(--ao-line)!important;border-radius:4px!important;background:linear-gradient(180deg,#fff 0,#f2fbff 18px,var(--ao-paper) 18px)!important;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px rgba(108,161,188,.22),0 3px 0 rgba(63,109,132,.18),0 7px 16px rgba(47,98,122,.09)!important;padding:18px 16px 16px!important}
.arg-system-box::before,.arg-system-box::after{content:"";position:absolute;top:6px;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0 18%,#a7bdc7 22% 52%,#68818d 56% 100%);box-shadow:0 1px 1px rgba(0,0,0,.22)}
.arg-system-box::before{left:7px}.arg-system-box::after{right:7px}
.arg-system-box h1,.arg-system-box h2,body:not(.gc-design-test) .section-box>h1,body:not(.gc-design-test) .section-box>h2{letter-spacing:.035em}
body:not(.gc-design-test) .section-box>h1,body:not(.gc-design-test) .section-box>h2{position:relative;background:linear-gradient(#ffffff,#dff5ff 46%,#bce9fb 47%,#eaf9ff);border:1px solid #8dcce7;border-bottom-color:#6ea9c5;box-shadow:inset 0 1px 0 #fff,0 2px 0 rgba(84,135,158,.12);padding:8px 10px!important;text-shadow:0 1px 0 #fff}
/* 1,2: tactile 2008-ish buttons */
.arg-btn{position:relative;display:inline-flex!important;align-items:center;justify-content:center;gap:6px;min-height:44px!important;padding:10px 16px!important;border:1px solid #4f8fac!important;border-radius:5px!important;background:linear-gradient(#fff 0,#eaf8ff 44%,#bce8fb 48%,#dff5ff 100%)!important;color:#216f93!important;font-family:"DotGothic16",sans-serif!important;font-weight:700!important;text-decoration:none!important;text-shadow:0 1px 0 #fff!important;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.65),0 3px 0 #5f94ac,0 5px 9px rgba(42,92,115,.18)!important;cursor:pointer;transition:transform .075s ease,filter .12s ease,box-shadow .075s ease!important;-webkit-tap-highlight-color:transparent}

.arg-btn[hidden]{display:none!important}
.arg-btn:hover,.arg-btn:focus-visible{filter:brightness(1.06) saturate(1.08);text-shadow:0 0 7px rgba(118,204,242,.75),0 1px #fff!important;outline:2px solid rgba(142,218,249,.42);outline-offset:2px}
.arg-btn:active{transform:translateY(3px)!important;box-shadow:inset 0 2px 5px rgba(45,91,111,.16),0 0 0 #5f94ac,0 2px 4px rgba(42,92,115,.12)!important}
.arg-btn:disabled{filter:grayscale(.45);opacity:.62;cursor:default;transform:none!important}
/* 5: intentional missing-image placeholder */
.arg-blank,.person-shell,.blank-crop{position:relative;overflow:hidden!important;border:1px solid #88b8ce!important;background-color:#f7fcff!important;background-image:linear-gradient(45deg,rgba(118,170,195,.08) 25%,transparent 25%),linear-gradient(-45deg,rgba(118,170,195,.08) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(118,170,195,.08) 75%),linear-gradient(-45deg,transparent 75%,rgba(118,170,195,.08) 75%)!important;background-size:16px 16px!important;background-position:0 0,0 8px,8px -8px,-8px 0!important;color:#7693a0!important;font-family:"DotGothic16",monospace!important;text-transform:uppercase;letter-spacing:.07em;box-shadow:inset 0 0 0 4px rgba(255,255,255,.72)!important}
.arg-blank::before,.person-shell::before,.blank-crop::before{content:"";position:absolute;inset:9px;pointer-events:none;background:linear-gradient(to bottom right,transparent calc(50% - .5px),rgba(114,157,177,.28) 50%,transparent calc(50% + .5px)),linear-gradient(to top right,transparent calc(50% - .5px),rgba(114,157,177,.28) 50%,transparent calc(50% + .5px))}
.arg-blank::after,.person-shell::after,.blank-crop::after{content:attr(data-file) "  /  NO PREVIEW";position:absolute;left:9px;bottom:7px;padding:2px 5px;background:rgba(247,252,255,.87);border:1px solid rgba(106,154,177,.35);font-size:9px;line-height:1.3;color:#6f8d9a}
/* 6,7: discoverable links */
body:not(.gc-design-test) a:not(.arg-btn):hover,body:not(.gc-design-test) a:not(.arg-btn):focus-visible,.gc-design-test .arg-system-box a:not(.arg-btn):hover,.gc-design-test .arg-system-box a:not(.arg-btn):focus-visible{color:#2181ad!important;text-shadow:0 0 6px rgba(99,193,235,.42)}
.ao-action-link::after{content:" ▶";font-size:.78em;opacity:.65}
/* 3,10,11: terminal readout + scanlines + state lamp */
.arg-status,.signal-readout,.ao-terminal{position:relative;font-family:"DotGothic16",monospace!important;letter-spacing:.035em}
.arg-status:not(:empty){padding:8px 10px 8px 24px;border:1px solid #6f94a5;background-color:#254652;color:#dff8ff!important;box-shadow:inset 0 0 12px rgba(0,0,0,.16)}
.arg-status:not(:empty)::before{content:"";position:absolute;left:8px;top:12px;width:7px;height:7px;border-radius:50%;background:var(--ao-off);box-shadow:inset 0 0 2px #000}
.arg-status[data-state="active"]::before,.arg-status.is-searching::before{background:var(--ao-warn);box-shadow:0 0 7px var(--ao-warn)}
.arg-status[data-state="ok"]::before,.arg-status.is-ok::before{background:var(--ao-ok);box-shadow:0 0 7px var(--ao-ok)}
.arg-status[data-state="error"]::before,.arg-status.is-error::before{background:var(--ao-error);box-shadow:0 0 7px var(--ao-error)}
.arg-status:not(:empty)::after,.signal-readout::after,.ao-terminal::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.025) 0 1px,rgba(0,0,0,.025) 1px 3px);mix-blend-mode:overlay}
.is-searching .ao-cursor,.ao-cursor{display:inline-block;margin-left:2px;width:.55em;border-bottom:2px solid currentColor;animation:aoCursor .72s steps(1,end) infinite}
@keyframes aoCursor{50%{opacity:0}}
/* 13 error micro-shake */
.ao-shake{animation:aoShake .22s linear 1}
@keyframes aoShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}50%{transform:translateX(2px)}75%{transform:translateX(-1px)}}
/* 14 successful repair becomes visually ordinary */
.ao-normalized{border-color:#a9c4cf!important;background:#fff!important;box-shadow:none!important;transition:all .45s ease}
/* 15 weather table */
.ao-weather-grid{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid #9ac4d7;background:#fff;text-align:center;overflow:hidden}
.ao-weather-grid>*{min-height:62px!important;padding:8px 3px!important;border-right:1px dotted #b7d2df!important;background:linear-gradient(#fff,#f4fbff)!important}
.ao-weather-grid>*:last-child{border-right:0!important}.ao-weather-grid .weather-cell.broken{border-radius:0!important;background:linear-gradient(#fff,#f4fbff)!important}.ao-weather-grid .weather-cell.broken:hover{background:#effaff!important}
/* 16,17 diary */
.diary-date-label{display:inline-block;padding:4px 8px;border:1px solid #efb3c8;border-radius:11px;background:linear-gradient(#fff,#ffe6f0 52%,#ffd3e4);box-shadow:inset 0 1px #fff,0 1px 2px rgba(150,90,112,.13);color:#aa5e7a;font:700 11px/1.2 "DotGothic16",sans-serif}
.ao-diary-nav{position:sticky;bottom:max(8px,env(safe-area-inset-bottom));z-index:20;display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:center;margin:18px 0 4px;padding:7px;border:1px solid #94c8df;border-radius:5px;background:rgba(245,252,255,.95);box-shadow:0 4px 14px rgba(47,91,112,.15);backdrop-filter:blur(5px)}
.ao-diary-nav a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:5px;text-align:center}
/* 18 restore focus */
body.ao-restore-page{background:#d9e8ee!important}.ao-restore-page::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 50% 43%,transparent 0 26%,rgba(30,51,62,.08) 60%,rgba(18,34,42,.2) 100%)}
.ao-restore-page main{position:relative;z-index:1}.ao-restore-page .official-page{box-shadow:0 16px 50px rgba(18,46,58,.25)}
/* 19 assembly feels magnetized */
.fragment-stage .fragment-card{will-change:transform,opacity;filter:drop-shadow(0 3px 3px rgba(45,88,107,.14))}.fragment-stage.aligned .fragment-card{filter:drop-shadow(0 0 7px rgba(118,196,230,.28))}.fragment-stage.assembling .fragment-card{transition-timing-function:cubic-bezier(.16,.8,.24,1.15)!important}
/* 20 post-register: only tiny environmental shifts */
body.ao-registered .pixel-clouds{filter:brightness(1.045) saturate(.95)}body.ao-registered .fake-footer-inner::after{content:" ";display:block;height:10px}body.ao-registered .official-page{box-shadow:0 0 0 1px rgba(142,212,241,.22),0 5px 20px rgba(81,158,190,.08)}
/* 2 rainbow: metal switch panel + luminous lenses */
.rainbow-machine{position:relative;border:2px solid #718e9d!important;border-radius:4px!important;background:linear-gradient(#eaf2f5,#b9cbd3 50%,#dbe6ea 51%,#eef4f6)!important;box-shadow:inset 0 0 0 3px #f9fcfd,inset 0 -8px 18px rgba(57,81,92,.12),0 3px 0 #5b7784,0 5px 10px rgba(41,70,83,.18)!important}
.rainbow-machine::before,.rainbow-machine::after{content:"+";position:absolute;top:5px;color:#6d7e85;font:bold 12px/1 monospace;text-shadow:0 1px #fff}.rainbow-machine::before{left:7px}.rainbow-machine::after{right:7px}
.ao-dot{border:5px solid #cad7dc!important;outline:1px solid #647c87!important;box-shadow:0 5px 0 #607985,0 7px 9px rgba(40,65,77,.25),inset 0 5px 6px rgba(255,255,255,.56),inset 0 -5px 7px rgba(0,0,0,.2),0 0 0 2px #eef3f5!important}.ao-dot.ok{box-shadow:0 2px 0 #607985,0 0 0 3px #eaf7fb,0 0 13px 6px rgba(255,255,255,.9),0 0 26px 9px currentColor,inset 0 0 13px rgba(255,255,255,.88)!important}
/* 9 later nodes gradually lose decorative warmth */
body[data-ao-depth="2"] .arg-system-box{--ao-paper:#f7fbfc;filter:saturate(.92)}body[data-ao-depth="3"] .arg-system-box{--ao-paper:#f4f7f8;filter:saturate(.72)}body[data-ao-depth="4"] .arg-system-box{--ao-paper:#f0f3f4;filter:saturate(.45)}body[data-ao-depth="4"] .section-box>h1,body[data-ao-depth="4"] .section-box>h2{filter:saturate(.45)}
/* 10 responsive / touch */
@media(max-width:560px){
 .arg-system-box{padding:16px 11px 13px!important;margin:14px 0!important}.arg-btn,.arg-input{width:100%;max-width:none!important}.arg-btn{min-height:48px!important}.ao-weather-grid{font-size:.9rem}.ao-weather-grid>*{min-height:66px!important}.arg-fragments,.fragment-stage{grid-template-columns:1fr!important}.ao-diary-nav{grid-template-columns:1fr 1fr}.ao-diary-nav .diary-list-link{grid-column:1/-1;grid-row:1}.rainbow-machine{padding:14px 9px!important}#rainbowDots{gap:12px!important;justify-content:center}.ao-dot{width:50px!important;height:50px!important}.arg-status{overflow-wrap:anywhere}body:not(.gc-design-test) .official-page{overflow-x:hidden}.arg-input{font-size:16px!important}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}


/* v318 micro design audit: containment / alignment polish */
.arg-blank::after,.person-shell::after,.blank-crop::after{right:9px;max-width:calc(100% - 18px);white-space:normal;overflow-wrap:anywhere}
@media(max-width:560px){
  #rainbowDots{width:248px!important;max-width:100%;margin:12px auto!important;gap:12px!important;justify-content:center!important}
}


/* v338 audit — standalone text links still need a real touch target.
   Keep the 2008 text-link look; only enlarge the invisible hit area. */
.section-box > p > .ao-action-link,
.diary-box > p > .ao-action-link{
  display:inline-flex!important;
  align-items:center;
  min-height:44px;
  padding:7px 2px;
  touch-action:manipulation;
}

/* v344 — supplied ARG photos/fragments + responsive media safety */
.arg-media{display:block;width:100%;max-width:100%;height:auto;box-sizing:border-box}
.arg-image-frame{margin:14px 0;border:1px solid #b8d9ea;background:rgba(255,255,255,.82);padding:8px;overflow:hidden}
.arg-image-frame img{display:block;width:100%;height:auto;max-height:min(62svh,560px);object-fit:contain;margin:auto}
.arg-image-frame.fragment img{image-rendering:auto;max-height:min(48svh,420px)}
.diary-photo{margin:18px 0;padding:7px;border:1px solid rgba(184,217,234,.9);background:rgba(255,255,255,.78)}
.diary-photo img{display:block;width:100%;height:auto;aspect-ratio:5/4;object-fit:cover}
.diary-photo figcaption{padding:7px 4px 2px;color:#6f8793;font-size:.76rem;font-family:"DotGothic16",sans-serif}
.restore-photo{position:relative;width:min(100%,520px);margin:14px auto;overflow:hidden;border:1px solid #b8d9ea;background:#eef8fc;aspect-ratio:1122/1402}
.restore-photo img{display:block;width:100%;height:100%;object-fit:cover}
.restore-photo .face-mask{position:absolute;left:35.5%;top:25.5%;width:28%;height:20.5%;border-radius:48% 52% 46% 54%;background:#050505;opacity:0;transform:scale(.82);transition:opacity .35s ease,transform .35s ease;box-shadow:0 0 1px #000;pointer-events:none}
.restore-photo.face-lost .face-mask{opacity:1;transform:scale(1)}
.restore-photo.recovering-face .face-mask{animation:faceRecover 1.55s steps(5,end) forwards}
@keyframes faceRecover{0%{opacity:1;filter:none}25%{opacity:.82;filter:contrast(1.8)}50%{opacity:.58;filter:blur(1px)}75%{opacity:.26;filter:blur(2px)}100%{opacity:0;filter:blur(4px)}}
.restore-continue{margin-top:12px}
@media(max-width:520px){
 .arg-image-frame{padding:5px}
 .arg-image-frame img{max-height:52svh}
 .diary-photo{margin-left:0;margin-right:0;padding:5px}
 .restore-photo{width:min(100%,390px)}
}
@media(max-height:620px) and (orientation:landscape){
 .arg-image-frame img{max-height:58vh}
 .restore-photo{width:min(58vh,420px)}
}

.fragment-complete-action{margin:14px 0 0;text-align:center}