/* PROJECT 0 — Liminal UI Engine v5 */
:root{
 --void:#050608;--surface:#0c1015;--surface-2:#121820;--text:#e6edf2;--muted:#87939f;
 --signal:#c5ff4a;--line:#2a3642;--danger:#ff6678;--amber:#d7b764;
 --ease-liminal:cubic-bezier(.16,1,.3,1);--radius:14px;
}
html{background:var(--void);color-scheme:dark;scroll-behavior:smooth}
body{background:radial-gradient(circle at 50% -20%,rgba(197,255,74,.035),transparent 38%),var(--void);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP","Noto Sans SC","Noto Sans Devanagari",sans-serif;letter-spacing:.005em}
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;background:linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px);background-size:100% 4px;opacity:.2}
.wrap{position:relative;z-index:2;width:min(1080px,calc(100% - 40px));margin:0 auto;padding:clamp(72px,10vw,140px) 0 130px}
header{max-width:850px;margin-bottom:clamp(44px,8vw,100px)}
.eyebrow{font:600 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.2em;color:var(--signal);text-transform:uppercase}
h1{font-size:clamp(48px,9vw,118px);line-height:.88;letter-spacing:-.07em;font-weight:560;margin:.16em 0 .35em;text-wrap:balance}
h2{letter-spacing:-.035em;font-weight:560}.lead{max-width:720px;font-size:clamp(17px,2vw,23px);line-height:1.7;color:#b9c4ce}
p{line-height:1.75}.meta{color:var(--muted);font-size:12px}
.panel,.card{background:linear-gradient(145deg,rgba(18,24,32,.72),rgba(9,12,16,.88));border:1px solid rgba(135,147,159,.18);border-radius:var(--radius);box-shadow:0 18px 80px rgba(0,0,0,.18);backdrop-filter:blur(14px)}
.panel{padding:clamp(20px,4vw,38px);margin:18px 0}.grid{gap:14px}.card{position:relative;padding:clamp(20px,3vw,34px);min-height:210px;overflow:hidden;transition:transform .24s var(--ease-liminal),border-color .24s,background .24s;color:var(--text);text-decoration:none}
.card:before{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--signal);transition:width .35s var(--ease-liminal)}
.card:hover,.card:focus-visible{transform:translateY(-3px);border-color:rgba(197,255,74,.55);background:linear-gradient(145deg,rgba(22,29,38,.94),rgba(9,12,16,.94));text-decoration:none}.card:hover:before,.card:focus-visible:before{width:100%}
button,.primary-button,.secondary-button,input,select,textarea{font:inherit}
button,.primary-button,.secondary-button{min-height:44px;border:0;border-bottom:1px solid rgba(197,255,74,.5);border-radius:0;background:transparent;color:var(--text);padding:10px 2px;cursor:pointer;transition:color .16s,letter-spacing .2s,border-color .2s,transform .08s}
button:hover,.primary-button:hover,.secondary-button:hover{color:var(--signal);letter-spacing:.02em;border-color:var(--signal)}button:active{transform:translateY(1px) scale(.992)}
input,textarea,select{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--text);padding:13px 0;outline:none;transition:border-color .18s,box-shadow .18s}input:focus,textarea:focus,select:focus{border-color:var(--signal);box-shadow:0 1px 0 var(--signal)}
.result.success{color:var(--signal)}.result.error{color:var(--amber)}
.limited-banner{font-size:9px;letter-spacing:.18em;background:rgba(5,6,8,.9);color:var(--muted);border-color:rgba(135,147,159,.16)}
/* Observation point */
.player-center-button{position:fixed;right:22px;top:22px;z-index:220;display:inline-flex;align-items:center;justify-content:center;gap:0;width:48px;height:48px;border:1px solid rgba(197,255,74,.4);border-radius:50%;background:rgba(5,6,8,.72);color:var(--signal);backdrop-filter:blur(18px);font-size:0;line-height:1;box-shadow:0 0 0 0 rgba(197,255,74,.12);transition:width .28s var(--ease-liminal),border-radius .28s,color .2s,box-shadow .4s,gap .28s}
.player-center-button:before{content:"○";display:block;flex:0 0 auto;font-size:22px;line-height:1;transform:translateY(-.5px)}
.player-center-button:after{content:"あなたの観測";display:block;position:relative;top:-1px;flex:0 1 auto;max-width:0;overflow:hidden;opacity:0;white-space:nowrap;font-size:11px;line-height:1;transition:max-width .25s var(--ease-liminal),opacity .2s}
.player-center-button:hover{width:132px;gap:8px;border-radius:28px;box-shadow:0 0 40px rgba(197,255,74,.08)}
.player-center-button:hover:after{max-width:82px;opacity:1}
.player-center{align-items:end;background:rgba(2,4,7,.52)}.player-center.open{display:flex}.player-center__panel{width:min(820px,100%);max-height:88vh;margin:0 auto;border-radius:24px 24px 0 0;padding:clamp(22px,4vw,40px);background:rgba(12,16,21,.97);border:1px solid rgba(135,147,159,.22);box-shadow:0 -30px 100px rgba(0,0,0,.5);animation:sheetUp .34s var(--ease-liminal)}
@keyframes sheetUp{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.player-center__grid{grid-template-columns:1fr 1fr;gap:16px}.player-center__section{border:0;border-top:1px solid rgba(135,147,159,.2);border-radius:0;background:transparent;padding:22px 0}.player-center__head h2{font-size:clamp(32px,6vw,66px);letter-spacing:-.06em}.player-center__close{border:0;color:var(--muted)}
.progress-track{height:2px;border:0;background:#202932}.progress-fill{background:var(--signal)}
.save-slot{border:0;border-bottom:1px solid rgba(135,147,159,.15);border-radius:0;padding:12px 0}.compact-button{min-height:34px;font-size:10px}
.pause-overlay{background:var(--void)}.pause-overlay h2{letter-spacing:-.07em}
/* navigation becomes quiet */
.observation-nav{top:12px;width:min(760px,calc(100% - 180px));border:0;border-bottom:1px solid rgba(135,147,159,.16);border-radius:0;background:rgba(5,6,8,.72);box-shadow:none;padding:8px 0}.observation-nav button,.observation-nav a{border:0;min-height:34px;padding:6px;color:var(--muted)}.observation-nav__chapter{color:var(--muted)}
/* protocol cards */
.protocol-babel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.protocol-babel-grid .card:nth-child(odd){transform:translateY(12px)}.protocol-babel-grid .card:hover{transform:translateY(-2px)}
.babel-status-strip{opacity:.55}.babel-fragment{pointer-events:auto}.babel-card-mark{margin-top:28px;opacity:.55}
/* entry */
.babel-shell{padding:clamp(24px,5vw,70px)}.wordfield{border-color:rgba(135,147,159,.14)}.language-stream{border-color:rgba(135,147,159,.08)}.observe{border:0;border-bottom:1px solid var(--signal);border-radius:0;background:rgba(5,6,8,.88);padding:16px 4px}
/* mobile */
@media(max-width:760px){.wrap{width:min(100% - 28px,720px);padding-top:92px}.protocol-babel-grid{grid-template-columns:1fr}.protocol-babel-grid .card:nth-child(odd){transform:none}.player-center-button{top:14px;right:14px}.player-center-button:hover{width:48px}.player-center-button:hover:after{display:none}.player-center__grid{grid-template-columns:1fr}.observation-nav{right:10px;bottom:10px;left:10px;width:auto;border:1px solid rgba(135,147,159,.16);border-radius:16px;padding:8px;background:rgba(5,6,8,.92)}h1{font-size:clamp(46px,16vw,78px)}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* v5.0.1 revised BABEL ENTRY */
.entry-revised{overflow:hidden;background:#050608}
.observation-entry{position:relative;min-height:100vh;padding:clamp(62px,8vw,110px);isolation:isolate}
.observation-sequence{position:absolute;left:50%;top:11%;transform:translateX(-50%);text-align:center;z-index:3;margin:0}
.observation-number{margin:0;color:#7f8a94;font:500 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.26em;animation:entryReveal .8s .4s both}
.observation-line{display:block;width:min(34vw,280px);height:1px;margin:18px auto 0;background:rgba(230,237,242,.22);transform-origin:center;animation:lineReveal 1s 1.1s both}
.law-field{position:absolute;inset:0;z-index:2}
.law-fragment{position:absolute;margin:0;max-width:min(48vw,660px);color:#e6edf2;font-weight:430;line-height:1.3;letter-spacing:-.025em;opacity:0;transition:opacity .35s,transform .5s var(--ease-liminal),color .3s}
.law-fragment:hover{color:#fff;transform:translateY(-2px)}
.law-ja{left:9%;top:34%;font-size:clamp(24px,4vw,54px);animation:entryReveal .9s 1.8s both}
.law-en{right:8%;top:26%;font-size:clamp(16px,2.2vw,30px);text-align:right;animation:entryReveal .9s 2.5s both}
.law-zh{left:16%;bottom:24%;font-size:clamp(17px,2.5vw,34px);animation:entryReveal .9s 3.2s both}
.law-hi{left:7%;top:18%;font-size:clamp(14px,1.8vw,24px);color:#9aa7b3;animation:entryReveal .9s 3.9s both}
.law-es{right:12%;bottom:18%;font-size:clamp(14px,1.8vw,25px);color:#9aa7b3;text-align:right;animation:entryReveal .9s 4.6s both}
.law-fr{right:25%;top:48%;font-size:clamp(13px,1.5vw,21px);color:#87939f;animation:entryReveal .9s 5.3s both}
.entry-threshold{position:absolute;left:50%;top:50%;width:150px;height:150px;transform:translate(-50%,-50%);display:grid;place-items:center;z-index:5}
.entry-observe{display:grid;place-items:center;width:56px;height:56px;border:0!important;border-radius:50%;padding:0;background:transparent;color:#e6edf2;opacity:.18;transition:opacity .3s,width .28s var(--ease-liminal),border-color .25s;color .25s;animation:entryReveal 1s 6.2s both}
.observe-symbol{font-size:30px;line-height:1}.observe-label{position:absolute;top:72px;opacity:0;font:500 10px ui-monospace,monospace;letter-spacing:.22em;transition:.25s}
.entry-threshold:hover .entry-observe,.entry-threshold.active .entry-observe{opacity:1;color:var(--signal)}
.entry-threshold:hover .observe-label,.entry-threshold.active .observe-label{opacity:1;top:66px}
.entry-false-actions{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);z-index:4;display:flex;gap:clamp(10px,2vw,26px);color:#59636d;font-size:10px;letter-spacing:.08em}
.entry-false-actions span{cursor:pointer;transition:color .2s}.entry-false-actions span:hover{color:#aab4bd}
.entry-status{position:absolute;left:50%;bottom:3.3%;transform:translateX(-50%);margin:0;color:#59636d;font-size:10px;white-space:nowrap;z-index:4}
.entry-status.error{color:#d7b764}.entry-footnote{position:absolute;right:26px;bottom:18px;margin:0;color:#3f4850;font:9px ui-monospace,monospace;letter-spacing:.08em}
@keyframes entryReveal{from{opacity:0;filter:blur(5px);transform:translateY(5px)}to{opacity:1;filter:none;transform:none}}
@keyframes lineReveal{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
@media(max-width:760px){.observation-entry{padding:68px 18px}.observation-sequence{top:12%}.law-ja{left:8%;top:33%;max-width:84vw}.law-en{right:7%;top:23%;max-width:72vw}.law-zh{left:9%;bottom:25%}.law-hi{left:7%;top:17%;max-width:80vw}.law-es{right:8%;bottom:17%;max-width:80vw}.law-fr{right:8%;top:56%;max-width:72vw}.entry-false-actions{width:88%;justify-content:space-between;gap:4px}.entry-status{bottom:2%;font-size:9px}.entry-footnote{display:none}}
@media(prefers-reduced-motion:reduce){.law-fragment,.observation-number,.observation-line,.entry-observe{animation:none!important;opacity:1!important;filter:none!important;transform:none!important}.observation-line{transform:none!important}}

/* v5.0.4 mobile navigation containment fix
   Reset desktop top positioning so fixed mobile navigation does not stretch
   between top and bottom edges. */
@media (max-width:760px){
  .observation-nav{
    top:auto !important;
    right:10px !important;
    bottom:calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    left:10px !important;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    max-height:72px !important;
    overflow:visible !important;
    align-self:auto !important;
  }
  body.has-observation-nav{
    padding-bottom:calc(92px + env(safe-area-inset-bottom, 0px));
  }
}