* { box-sizing:border-box; } :root { --green:#2dad14; --deep:#17351e; --ink:#182b20; --muted:#778379; } body { margin:0; min-height:100vh; display:grid; grid-template-columns:44% 56%; background:#fafbf7; color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased; } button,input { font:inherit; } button { cursor:pointer; } [hidden] { display:none!important; } .icon { width:18px; height:18px; } :focus-visible { outline:3px solid #2dad1480; outline-offset:4px; }
.access-panel { display:flex; flex-direction:column; min-height:100vh; padding:40px 11% 26px; }.access-brand a { display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; font-size:25px; font-weight:750; letter-spacing:-1.1px; }.access-brand b { font-weight:450; }.brand-divider { padding:0 8px; font-weight:300; color:#a7b5a4; }.brand-caption { display:block; margin:12px 0 0 44px; font-size:8px; letter-spacing:1.3px; color:#778779; }.octa-mark { width:31px; height:31px; display:grid; grid-template-columns:1fr 1fr; gap:3px; transform:rotate(-8deg); }.octa-mark i { background:var(--green); border-radius:3px; }.octa-mark i:last-child { background:#133c1d; }
.access-form { width:100%; max-width:370px; margin:auto 0; padding:40px 0; }.section-index { display:flex; align-items:center; gap:14px; color:#64805c; font:10px ui-monospace,SFMono-Regular,monospace; letter-spacing:1.3px; }.section-rule { height:1px; width:58px; background:#bbd1af; } h1 { font-size:clamp(44px,4.2vw,64px); line-height:.99; letter-spacing:-3px; font-weight:650; margin:22px 0 18px; }.access-description { font-size:12px; line-height:1.8; color:#7c857b; margin:0 0 28px; } label { display:block; font-size:11px; font-weight:650; margin:20px 0 9px; color:#3c4c40; }.field-control { display:flex; align-items:center; gap:12px; border:1px solid #d9e1d3; border-radius:7px; background:#fff; padding:0 14px; height:49px; transition:border-color .15s,box-shadow .15s; }.field-control:focus-within { border-color:var(--green); box-shadow:0 0 0 3px #2dad1410; }.field-control>.icon { color:#93a38e; width:17px; height:17px; }.field-control input { border:0; outline:0; min-width:0; width:100%; background:transparent; color:var(--ink); height:100%; padding:0; font-size:12px; }.field-control input::placeholder { color:#abb3a6; }.password-toggle { width:32px; height:32px; flex:0 0 32px; display:grid; place-items:center; background:none; color:#698060; padding:0; border:0; border-radius:4px; }.password-toggle:hover { background:#eef5e7; color:var(--deep); }.access-note { display:flex; align-items:center; gap:7px; color:#8a9585; margin:14px 0 22px; font-size:9px; }.access-note .icon { width:13px; height:13px; }.submit-button { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:49px; background:var(--green); color:white; border:1px solid #299e12; padding:12px 16px; border-radius:7px; font-size:12px; font-weight:650; box-shadow:0 4px 0 #21850d; transition:background .15s,transform .15s; }.submit-button:hover { background:#249b0d; }.submit-button:active { transform:translateY(2px); box-shadow:0 2px 0 #21850d; }.submit-button:disabled { opacity:.6; cursor:wait; }.account-help { color:#939b8f; font-size:9px; margin:24px 0 0; }.access-footer { display:flex; align-items:center; justify-content:space-between; border-top:1px solid #e1e6dc; padding-top:22px; gap:15px; }.access-footer img { width:88px; height:26px; object-fit:contain; }.access-footer span { font-size:8px; color:#929d8c; }.err { display:none; border-left:3px solid #c34635; padding:12px; background:#fceee8; color:#a83220; font-size:12px; line-height:1.5; margin:18px 0; }.change-copy { color:#65745f; font-size:12px; }.change-copy+label { margin-top:20px; }#change .submit-button { margin-top:24px; }
.field-board { position:relative; isolation:isolate; overflow:hidden; background:#183a21; color:white; margin:14px 14px 14px 0; border-radius:12px; display:flex; flex-direction:column; padding:32px 7%; min-height:calc(100vh - 28px); }.board-grid { position:absolute; z-index:-1; inset:0; background-image:linear-gradient(#b2db9610 1px,transparent 1px),linear-gradient(90deg,#b2db9610 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(transparent,#000 35%,#000); }.board-top { display:flex; justify-content:space-between; align-items:center; font-size:7px; letter-spacing:1.1px; color:#a8bea0; gap:12px; }.board-symbol { color:#91cb71; font-size:15px; font-weight:800; white-space:nowrap; }.board-heading { margin:50px 0 0; position:relative; z-index:2; }.board-kicker { color:#a0ca85; font-size:8px; letter-spacing:1.8px; }.board-heading h2 { font-size:clamp(30px,3.2vw,47px); line-height:1.13; font-weight:500; letter-spacing:-1.9px; margin:14px 0 0; }.board-heading em { font-style:normal; color:#acd38d; }
.document-scene { position:relative; width:100%; min-height:355px; margin:35px auto 20px; flex:1; display:flex; align-items:center; justify-content:center; }.report-object { position:relative; width:270px; background:#fcfcf6; color:#253e26; padding:23px 23px 15px; border-radius:4px; transform:rotate(-7deg); box-shadow:10px 24px 40px #06180c66; z-index:1; }.report-back { position:absolute; width:267px; height:310px; border:1px solid #8fad70; background:#91ac6d; border-radius:4px; transform:rotate(7deg) translate(14px,0); }.document-brand { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #dce4d3; padding-bottom:16px; }.document-brand img { width:88px; height:27px; object-fit:contain; }.document-brand span { font-size:5px; line-height:1.7; text-align:right; letter-spacing:.6px; color:#8c9983; }.document-number { font:20px ui-monospace,monospace; color:#73a955; margin-top:20px; }.document-number span { font-size:7px; color:#819275; letter-spacing:1px; }.report-object h3 { font-size:23px; font-weight:650; line-height:1.15; letter-spacing:-.9px; margin:9px 0 13px; }.document-status { display:flex; gap:5px; align-items:center; color:#5c8643; font-size:7px; }.document-status .icon { width:11px; height:11px; }.document-section { background:#2dad14; color:white; font-size:6px; letter-spacing:.8px; margin-top:20px; padding:6px 7px; }.report-lines { display:grid; gap:5px; padding:10px 0; }.report-lines i { height:3px; background:#dfe6d7; }.report-lines i:last-child { width:64%; }.document-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }.document-grid div { display:flex; align-items:center; gap:6px; background:#edf1e6; color:#779363; padding:8px; font-size:6px; }.document-grid .icon { width:15px; height:15px; }.document-bottom { display:flex; justify-content:space-between; color:#829773; font-size:5px; letter-spacing:.5px; border-top:1px solid #e2e9d9; margin-top:17px; padding-top:10px; }.evidence-tag { position:absolute; top:24px; left:-13px; z-index:3; display:flex; align-items:center; gap:10px; padding:12px 15px; background:#e9c576; color:#483b1e; border:1px solid #f4d89a; border-radius:7px; box-shadow:0 10px 24px #06180c20; transform:rotate(-3deg); }.evidence-tag>.icon { width:24px; height:24px; }.evidence-tag strong,.delivery-tag strong { display:block; font-size:10px; font-weight:650; }.evidence-tag div span,.delivery-tag div span { display:block; font-size:7px; opacity:.65; margin-top:4px; }.evidence-dot { width:6px; height:6px; border-radius:50%; background:#9a722c; margin-left:8px; }.delivery-tag { position:absolute; bottom:8px; right:-20px; z-index:3; display:flex; align-items:center; gap:11px; background:#ecf0e3; color:#274328; border:1px solid #fff; border-radius:8px; padding:13px 16px; box-shadow:0 12px 24px #06180c40; transform:rotate(3deg); }.delivery-icon { width:30px; height:34px; background:#d6e5bf; display:grid; place-items:center; border-radius:5px; color:#518031; }.delivery-tag>.icon { width:17px; height:17px; color:#2dad14; margin-left:7px; }.scene-axis { position:absolute; background:#8cbd6f30; }.axis-x { height:1px; width:130%; top:50%; left:-15%; }.axis-y { width:1px; height:120%; left:50%; top:-10%; }.board-footer { display:flex; align-items:center; gap:14px; justify-content:center; margin-top:20px; color:#a6bf99; font-size:9px; }.board-footer>span { display:flex; align-items:center; gap:7px; white-space:nowrap; }.board-footer .icon { width:14px; height:14px; }.board-footer>i { width:20px; height:1px; background:#66835b; }
@media(min-height:850px) { .document-scene { min-height:420px; }.report-object { width:300px; padding:28px; }.report-back { width:300px; height:350px; }.evidence-tag { top:55px; }.delivery-tag { bottom:40px; } }
@media(max-width:1050px) { .access-panel { padding:30px 9%; }.field-board { padding:30px 7%; }.board-heading h2 { font-size:35px; }.evidence-tag { left:-25px; }.delivery-tag { right:-28px; }.board-footer { gap:8px; font-size:8px; } }
@media(max-width:760px) { body { display:block; background:#f7f9f1; }.access-panel { padding:30px 28px 24px; min-height:100dvh; border-top:5px solid var(--green); }.access-form { max-width:420px; margin:auto; padding:40px 0; }h1 { font-size:57px; }.field-board { display:none; }.access-brand { max-width:420px; width:100%; margin:auto; }.access-footer { max-width:420px; width:100%; margin:auto; }.account-help { font-size:10px; }.field-control { height:52px; }.field-control input { font-size:16px; } }
@media(prefers-reduced-motion:reduce) { * { transition:none!important; } }