#web-ui-zukan-root{
  --bg:#f4f7fb;--surface:#fff;--text:#17324d;--muted:#64748b;--line:#dbe5ef;
  --main:#1e5aa8;--main2:#2f80ed;--accent:#f3b61f;--success:#198754;--danger:#d9485f;
  --shadow:0 14px 38px rgba(30,58,95,.12);--r:20px;
}
#web-ui-zukan-root *{box-sizing:border-box}
#web-ui-zukan-root, #web-ui-zukan-root{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Yu Gothic",sans-serif;background:var(--bg);color:var(--text)}
#web-ui-zukan-root button, #web-ui-zukan-root input, #web-ui-zukan-root select, #web-ui-zukan-root textarea{font:inherit}
#web-ui-zukan-root button{cursor:pointer;touch-action:manipulation}
#web-ui-zukan-root .app{min-height:100dvh;padding-bottom:30px}
#web-ui-zukan-root header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
#web-ui-zukan-root .header-inner{max-width:1180px;margin:auto;padding:12px 16px;display:flex;align-items:center;gap:12px}
#web-ui-zukan-root .logo{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,var(--main),var(--main2));color:#fff;font-size:25px;box-shadow:0 8px 18px rgba(30,90,168,.24)}
#web-ui-zukan-root .title h1{margin:0;font-size:clamp(18px,3vw,25px)}
#web-ui-zukan-root .title p{margin:2px 0 0;color:var(--muted);font-size:12px}
#web-ui-zukan-root .hero{max-width:1180px;margin:0 auto;padding:18px 16px 8px}
#web-ui-zukan-root .hero-card{background:linear-gradient(135deg,#173d6c,#2f80ed);color:white;border-radius:26px;padding:22px;box-shadow:var(--shadow)}
#web-ui-zukan-root .hero-card h2{margin:0 0 7px;font-size:clamp(24px,5vw,38px)}
#web-ui-zukan-root .hero-card p{margin:0;line-height:1.75}
#web-ui-zukan-root .tabbar-wrap{max-width:1180px;margin:auto;padding:18px 16px 2px}
#web-ui-zukan-root .tabbar{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:5px}
#web-ui-zukan-root .tabbar::-webkit-scrollbar{display:none}
#web-ui-zukan-root .tab{flex:none;border:1px solid var(--line);background:#fff;color:var(--text);border-radius:999px;padding:11px 16px;font-weight:900}
#web-ui-zukan-root .tab.active{background:var(--main);color:#fff;border-color:var(--main)}
#web-ui-zukan-root main{max-width:1180px;margin:auto;padding:12px 16px}
#web-ui-zukan-root .panel{display:none}
#web-ui-zukan-root .panel.active{display:block}
#web-ui-zukan-root .panel-head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:12px}
#web-ui-zukan-root .panel-head h2{margin:0;font-size:24px}
#web-ui-zukan-root .panel-head p{margin:4px 0 0;color:var(--muted);font-size:14px}
#web-ui-zukan-root .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
#web-ui-zukan-root .card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 8px 24px rgba(30,58,95,.08)}
#web-ui-zukan-root .demo{min-height:220px;background:linear-gradient(145deg,#f8fbff,#eef4fb);display:grid;place-items:center;padding:18px;position:relative;overflow:hidden}
#web-ui-zukan-root .body{padding:16px}
#web-ui-zukan-root .name-row{display:flex;align-items:center;gap:10px}
#web-ui-zukan-root .num{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:#eaf3ff;color:var(--main);font-weight:900}
#web-ui-zukan-root .name-row h3{margin:0;font-size:20px}
#web-ui-zukan-root .en{color:var(--muted);font-size:12px;font-weight:700}
#web-ui-zukan-root .desc{margin:11px 0 0;color:#41566c;line-height:1.7;font-size:14px}
#web-ui-zukan-root .use{margin-top:10px;background:#f6f9fc;border-left:4px solid var(--accent);padding:10px 12px;border-radius:10px;font-size:13px;line-height:1.6}
#web-ui-zukan-root .primary, #web-ui-zukan-root .secondary, #web-ui-zukan-root .outline{border:0;border-radius:13px;padding:12px 18px;font-weight:900}
#web-ui-zukan-root .primary{background:var(--main);color:#fff;box-shadow:0 7px 16px rgba(30,90,168,.25)}
#web-ui-zukan-root .secondary{background:var(--accent);color:#3d2e00}
#web-ui-zukan-root .outline{background:#fff;color:var(--main);border:2px solid var(--main)}
#web-ui-zukan-root .row{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
#web-ui-zukan-root .sample-card{width:min(260px,100%);padding:17px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 10px 24px rgba(30,58,95,.12)}
#web-ui-zukan-root .sample-card strong{display:block;margin-bottom:7px}
#web-ui-zukan-root .sample-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
#web-ui-zukan-root .tabs-demo{width:min(300px,100%);background:#fff;border:1px solid var(--line);border-radius:16px;padding:6px;display:flex;gap:5px}
#web-ui-zukan-root .tabs-demo button{flex:1;border:0;background:transparent;border-radius:11px;padding:10px;font-weight:900;color:var(--muted)}
#web-ui-zukan-root .tabs-demo button.active{background:var(--main);color:#fff}
#web-ui-zukan-root .accordion{width:min(300px,100%);border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
#web-ui-zukan-root .accordion button{width:100%;padding:14px;border:0;background:#fff;font-weight:900;text-align:left;display:flex;justify-content:space-between}
#web-ui-zukan-root .ac-content{display:none;padding:0 14px 14px;color:var(--muted);font-size:13px;line-height:1.6}
#web-ui-zukan-root .accordion.open .ac-content{display:block}
#web-ui-zukan-root .form-demo{width:min(310px,100%);display:grid;gap:10px}
#web-ui-zukan-root .form-demo input, #web-ui-zukan-root .form-demo textarea, #web-ui-zukan-root .form-demo select{width:100%;padding:11px;border:2px solid var(--line);border-radius:13px;background:#fff;color:var(--text);outline:none}
#web-ui-zukan-root .form-demo input:focus, #web-ui-zukan-root .form-demo textarea:focus, #web-ui-zukan-root .form-demo select:focus{border-color:var(--main2);box-shadow:0 0 0 4px rgba(47,128,237,.12)}
#web-ui-zukan-root .checks{display:flex;gap:18px;align-items:center;background:#fff;padding:16px;border-radius:16px;border:1px solid var(--line)}
#web-ui-zukan-root .switch{position:relative;width:56px;height:32px}
#web-ui-zukan-root .switch input{opacity:0;width:0;height:0}
#web-ui-zukan-root .switch span{position:absolute;inset:0;border-radius:99px;background:#cbd5e1;transition:.2s}
#web-ui-zukan-root .switch span:after{content:"";position:absolute;width:24px;height:24px;left:4px;top:4px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:.2s}
#web-ui-zukan-root .switch input:checked+span{background:var(--success)}
#web-ui-zukan-root .switch input:checked+span:after{transform:translateX(24px)}
#web-ui-zukan-root .slider-box{width:min(300px,100%);background:#fff;padding:18px;border:1px solid var(--line);border-radius:16px}
#web-ui-zukan-root .slider-box input{width:100%}
#web-ui-zukan-root .stepper{display:flex;align-items:center;gap:12px;background:#fff;padding:12px;border-radius:16px;border:1px solid var(--line)}
#web-ui-zukan-root .stepper button{width:44px;height:44px;border:0;border-radius:12px;background:#eaf3ff;color:var(--main);font-size:24px;font-weight:900}
#web-ui-zukan-root .stepper output{min-width:55px;text-align:center;font-size:26px;font-weight:900}
#web-ui-zukan-root .progress{width:min(300px,100%);height:20px;background:#dfe8f2;border-radius:99px;overflow:hidden}
#web-ui-zukan-root .progress span{display:block;width:68%;height:100%;background:linear-gradient(90deg,var(--main),var(--main2))}
#web-ui-zukan-root .badge-demo{position:relative;width:62px;height:62px;border-radius:18px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-size:29px}
#web-ui-zukan-root .badge{position:absolute;right:-9px;top:-9px;min-width:27px;height:27px;padding:0 7px;border-radius:99px;background:var(--danger);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:900}
#web-ui-zukan-root .spinner{width:54px;height:54px;border-radius:50%;border:7px solid #dbe7f5;border-top-color:var(--main2);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#web-ui-zukan-root .tooltip-target{position:relative}
#web-ui-zukan-root .tooltip{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);background:#17324d;color:#fff;border-radius:9px;padding:7px 9px;font-size:12px;white-space:nowrap;display:none}
#web-ui-zukan-root .tooltip-target:hover .tooltip, #web-ui-zukan-root .tooltip-target:focus .tooltip{display:block}
#web-ui-zukan-root .toast{position:fixed;left:50%;bottom:24px;z-index:100;transform:translate(-50%,120px);opacity:0;background:#17324d;color:#fff;border-radius:15px;padding:13px 18px;box-shadow:var(--shadow);transition:.28s}
#web-ui-zukan-root .toast.show{transform:translate(-50%,0);opacity:1}
#web-ui-zukan-root .overlay{position:fixed;inset:0;z-index:70;background:rgba(15,30,58,.56);display:none;place-items:center;padding:16px}
#web-ui-zukan-root .overlay.show{display:grid}
#web-ui-zukan-root .modal{width:min(500px,100%);background:#fff;border-radius:24px;padding:22px;box-shadow:0 28px 80px rgba(0,0,0,.28)}
#web-ui-zukan-root .modal h2{margin:0 0 8px}
#web-ui-zukan-root .modal p{line-height:1.7;color:#41566c}
#web-ui-zukan-root .drawer-bg{position:fixed;inset:0;background:rgba(15,30,58,.48);z-index:75;display:none}
#web-ui-zukan-root .drawer-bg.show{display:block}
#web-ui-zukan-root .drawer{position:fixed;top:0;right:0;bottom:0;z-index:80;width:min(390px,88vw);background:#fff;transform:translateX(105%);transition:.28s;padding:20px;box-shadow:-18px 0 50px rgba(0,0,0,.22)}
#web-ui-zukan-root .drawer.show{transform:translateX(0)}
#web-ui-zukan-root .sheet{position:fixed;left:0;right:0;bottom:0;z-index:90;background:#fff;border-radius:25px 25px 0 0;transform:translateY(110%);transition:.28s;padding:12px 18px 28px;box-shadow:0 -18px 48px rgba(0,0,0,.22)}
#web-ui-zukan-root .sheet.show{transform:translateY(0)}
#web-ui-zukan-root .handle{width:48px;height:5px;background:#cbd5e1;border-radius:99px;margin:0 auto 16px}
#web-ui-zukan-root .fab{position:fixed;right:20px;bottom:20px;width:58px;height:58px;border:0;border-radius:50%;background:var(--accent);color:#3d2e00;font-size:25px;box-shadow:0 10px 24px rgba(0,0,0,.22);z-index:45}
@media(max-width:980px){#web-ui-zukan-root .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){#web-ui-zukan-root .grid{grid-template-columns:1fr}
#web-ui-zukan-root .demo{min-height:190px}
#web-ui-zukan-root .title p{display:none}}
@media(prefers-reduced-motion:reduce){#web-ui-zukan-root *, #web-ui-zukan-root *:before, #web-ui-zukan-root *:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
#web-ui-zukan-root .layout-demo{width:min(330px,100%);display:grid;grid-template-columns:90px 1fr;grid-template-rows:46px 120px 42px;gap:7px}
#web-ui-zukan-root .layout-demo span{display:grid;place-items:center;border-radius:10px;font-size:12px;font-weight:900}
#web-ui-zukan-root .layout-demo .hd{grid-column:1/3;background:#dbeafe}
#web-ui-zukan-root .layout-demo .sd{background:#fde68a}
#web-ui-zukan-root .layout-demo .mn{background:#dcfce7}
#web-ui-zukan-root .layout-demo .ft{grid-column:1/3;background:#e2e8f0}
#web-ui-zukan-root .grid-demo{width:min(320px,100%);display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
#web-ui-zukan-root .grid-demo span{height:55px;border-radius:10px;background:#dbeafe;display:grid;place-items:center;font-weight:900}
#web-ui-zukan-root .stack-demo{width:min(300px,100%);display:grid;gap:8px}
#web-ui-zukan-root .stack-demo span{padding:13px;border-radius:11px;background:#fff;border:1px solid var(--line);text-align:center;font-weight:800}
#web-ui-zukan-root .navbar-demo{width:min(330px,100%);background:#17324d;color:#fff;border-radius:15px;padding:8px;display:flex;align-items:center;gap:7px}
#web-ui-zukan-root .navbar-demo strong{margin-right:auto;padding-left:7px}
#web-ui-zukan-root .navbar-demo button{border:0;background:transparent;color:#fff;padding:8px;border-radius:8px}
#web-ui-zukan-root .breadcrumb{display:flex;gap:7px;align-items:center;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px}
#web-ui-zukan-root .pagination{display:flex;gap:6px}
#web-ui-zukan-root .pagination button{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:#fff;font-weight:900}
#web-ui-zukan-root .pagination button.active{background:var(--main);color:#fff}
#web-ui-zukan-root .step-indicator{width:min(340px,100%);display:flex;align-items:center}
#web-ui-zukan-root .step-indicator span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#dbe5ef;font-weight:900}
#web-ui-zukan-root .step-indicator span.done{background:var(--main);color:#fff}
#web-ui-zukan-root .step-indicator i{height:5px;flex:1;background:#dbe5ef}
#web-ui-zukan-root .step-indicator i.done{background:var(--main)}
#web-ui-zukan-root .table-wrap{width:100%;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:14px}
#web-ui-zukan-root .demo-table{width:100%;border-collapse:collapse;min-width:270px}
#web-ui-zukan-root .demo-table th, #web-ui-zukan-root .demo-table td{padding:10px;border-bottom:1px solid var(--line);text-align:left;font-size:13px}
#web-ui-zukan-root .demo-table th{background:#eef4fb}
#web-ui-zukan-root .stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;width:min(330px,100%)}
#web-ui-zukan-root .stat{background:#fff;border:1px solid var(--line);border-radius:13px;padding:13px;text-align:center}
#web-ui-zukan-root .stat strong{display:block;font-size:23px;color:var(--main)}
#web-ui-zukan-root .chart{width:min(320px,100%);height:150px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;align-items:end;gap:10px}
#web-ui-zukan-root .chart span{flex:1;background:linear-gradient(var(--main2),var(--main));border-radius:8px 8px 3px 3px}
#web-ui-zukan-root .alert-box{width:min(320px,100%);border-radius:14px;padding:14px;background:#fff4dc;border:1px solid #f2c15b;color:#664b00}
#web-ui-zukan-root .inline-error{width:min(300px,100%)}
#web-ui-zukan-root .inline-error input{width:100%;padding:11px;border-radius:11px;border:2px solid var(--danger);outline:none}
#web-ui-zukan-root .inline-error small{display:block;color:var(--danger);margin-top:6px;font-weight:700}
#web-ui-zukan-root .success-state{width:min(300px,100%);background:#ecfdf3;border:1px solid #86efac;border-radius:15px;padding:18px;text-align:center}
#web-ui-zukan-root .success-state b{font-size:36px;color:var(--success);display:block}
#web-ui-zukan-root .phone{width:220px;height:390px;background:#111827;border-radius:32px;padding:12px;box-shadow:0 18px 40px rgba(0,0,0,.25);position:relative}
#web-ui-zukan-root .phone-screen{height:100%;background:#f8fafc;border-radius:22px;overflow:hidden;display:flex;flex-direction:column}
#web-ui-zukan-root .mobile-top{height:48px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 13px;font-weight:900}
#web-ui-zukan-root .mobile-body{flex:1;padding:12px;display:grid;place-items:center;color:var(--muted);text-align:center}
#web-ui-zukan-root .bottom-nav{height:60px;background:#fff;border-top:1px solid var(--line);display:flex}
#web-ui-zukan-root .bottom-nav button{flex:1;border:0;background:#fff;font-size:11px}
#web-ui-zukan-root .bottom-nav button.active{color:var(--main);font-weight:900}
#web-ui-zukan-root .mobile-menu{position:absolute;left:12px;right:12px;top:60px;background:#fff;border-radius:16px;padding:10px;box-shadow:var(--shadow);display:none;z-index:2}
#web-ui-zukan-root .mobile-menu.show{display:block}
#web-ui-zukan-root .mobile-menu button{width:100%;border:0;background:#fff;text-align:left;padding:11px;border-radius:9px}
#web-ui-zukan-root .swipe-card{width:min(300px,100%);height:150px;background:#fff;border:1px solid var(--line);border-radius:18px;display:grid;place-items:center;touch-action:pan-y;transition:.2s;font-weight:900}
#web-ui-zukan-root .story-stage{width:min(340px,100%);background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:0 8px 20px rgba(30,58,95,.08)}
#web-ui-zukan-root .story-stage h4{margin:0 0 10px;font-size:15px}
#web-ui-zukan-root .quiz-options{display:grid;gap:8px}
#web-ui-zukan-root .quiz-options button{border:1px solid var(--line);background:#fff;border-radius:11px;padding:10px;text-align:left;font-weight:800}
#web-ui-zukan-root .quiz-options button.correct{background:#ecfdf3;border-color:#86efac;color:#166534}
#web-ui-zukan-root .quiz-options button.wrong{background:#fff1f2;border-color:#fda4af;color:#9f1239}
#web-ui-zukan-root .quiz-result{min-height:22px;margin-top:9px;font-size:13px;font-weight:900}
#web-ui-zukan-root .ox-wrap{display:flex;gap:12px;justify-content:center}
#web-ui-zukan-root .ox-wrap button{width:82px;height:82px;border-radius:50%;border:0;font-size:36px;font-weight:900}
#web-ui-zukan-root .ox-o{background:#dbeafe;color:#1d4ed8}
#web-ui-zukan-root .ox-x{background:#fee2e2;color:#b91c1c}
#web-ui-zukan-root .sort-list{display:grid;gap:8px}
#web-ui-zukan-root .sort-item{display:flex;align-items:center;gap:8px;background:#f8fafc;border:1px solid var(--line);padding:9px;border-radius:10px}
#web-ui-zukan-root .sort-item span{flex:1;font-weight:800}
#web-ui-zukan-root .sort-item button{width:34px;height:34px;border:0;border-radius:9px;background:#eaf3ff;color:var(--main);font-weight:900}
#web-ui-zukan-root .hotspot-scene{position:relative;height:170px;border-radius:14px;background:linear-gradient(#bfe3ff 0 55%,#94c973 55%);overflow:hidden}
#web-ui-zukan-root .hotspot-scene:before{content:"🌾🌾🌾";position:absolute;left:18px;bottom:18px;font-size:34px}
#web-ui-zukan-root .hotspot-scene:after{content:"🏠";position:absolute;right:20px;bottom:27px;font-size:42px}
#web-ui-zukan-root .hotspot-btn{position:absolute;width:32px;height:32px;border-radius:50%;border:4px solid white;background:var(--accent);box-shadow:0 3px 10px rgba(0,0,0,.25);font-weight:900}
#web-ui-zukan-root .hotspot-info{margin-top:8px;font-size:13px;font-weight:800;color:var(--main)}
#web-ui-zukan-root .dialogue-box{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
#web-ui-zukan-root .avatar{width:46px;height:46px;border-radius:50%;background:#eaf3ff;display:grid;place-items:center;font-size:25px;flex:none}
#web-ui-zukan-root .speech{background:#f1f5f9;border-radius:14px;padding:10px;line-height:1.5;font-size:13px;position:relative}
#web-ui-zukan-root .branch-buttons{display:grid;gap:8px}
#web-ui-zukan-root .branch-buttons button{border:0;border-radius:11px;padding:10px;background:#eaf3ff;color:var(--main);font-weight:900}
#web-ui-zukan-root .interview-answer{margin-top:10px;padding:10px;border-radius:11px;background:#f8fafc;min-height:58px;font-size:13px;line-height:1.6}
#web-ui-zukan-root .story-carousel{position:relative;overflow:hidden}
#web-ui-zukan-root .story-slide{display:none;min-height:150px;border-radius:14px;padding:16px;background:linear-gradient(135deg,#eaf3ff,#fff7db)}
#web-ui-zukan-root .story-slide.active{display:block}
#web-ui-zukan-root .story-slide .big{font-size:48px;text-align:center;margin:8px 0}
#web-ui-zukan-root .carousel-controls{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
#web-ui-zukan-root .carousel-controls button{border:0;border-radius:10px;padding:8px 12px;background:var(--main);color:#fff;font-weight:900}
#web-ui-zukan-root .dots{display:flex;gap:5px}
#web-ui-zukan-root .dots i{width:8px;height:8px;border-radius:50%;background:#cbd5e1}
#web-ui-zukan-root .dots i.active{background:var(--main)}
#web-ui-zukan-root .match-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#web-ui-zukan-root .match-grid button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px;font-weight:800}
#web-ui-zukan-root .match-grid button.selected{outline:3px solid rgba(47,128,237,.25);border-color:var(--main2)}
#web-ui-zukan-root .match-grid button.matched{background:#ecfdf3;border-color:#86efac;color:#166534}
#web-ui-zukan-root .compare-slider{position:relative;height:165px;border-radius:14px;overflow:hidden;background:#dbeafe}
#web-ui-zukan-root .compare-before, #web-ui-zukan-root .compare-after{position:absolute;inset:0;display:grid;place-items:center;font-size:46px}
#web-ui-zukan-root .compare-before{background:#c7d2fe}
#web-ui-zukan-root .compare-after{background:#fde68a;clip-path:inset(0 50% 0 0)}
#web-ui-zukan-root .compare-range{width:100%;margin-top:10px}
#web-ui-zukan-root .mission-list{display:grid;gap:8px}
#web-ui-zukan-root .mission-list label{display:flex;align-items:center;gap:9px;background:#f8fafc;padding:10px;border:1px solid var(--line);border-radius:10px;font-weight:800}
#web-ui-zukan-root .endings{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
#web-ui-zukan-root .endings button{border:1px solid var(--line);background:#fff;border-radius:11px;padding:10px;font-weight:900}
#web-ui-zukan-root .ending-result{margin-top:10px;text-align:center;font-size:14px;font-weight:900;min-height:24px}
#web-ui-zukan-root .image-sequence-grid, #web-ui-zukan-root .multi-grid, #web-ui-zukan-root .photo-gallery, #web-ui-zukan-root .collection-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
#web-ui-zukan-root .image-sequence-grid button, #web-ui-zukan-root .multi-grid button, #web-ui-zukan-root .photo-gallery button{position:relative;min-height:66px;border:2px solid var(--line);background:#fff;border-radius:12px;font-weight:900}
#web-ui-zukan-root .image-sequence-grid button{font-size:28px}
#web-ui-zukan-root .image-sequence-grid button.selected, #web-ui-zukan-root .multi-grid button.selected, #web-ui-zukan-root .photo-gallery button.active{border-color:var(--main);background:#eaf3ff}
#web-ui-zukan-root .seq-num{position:absolute;right:5px;top:5px;width:24px;height:24px;border-radius:50%;background:var(--main);color:#fff;display:none;place-items:center;font-size:12px}
#web-ui-zukan-root .selected .seq-num{display:grid}
#web-ui-zukan-root .blank-demo select{padding:8px;border:2px solid var(--line);border-radius:10px;background:#fff}
#web-ui-zukan-root .classify-board{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#web-ui-zukan-root .classify-zone{min-height:90px;border:2px dashed #94a3b8;border-radius:12px;padding:8px;text-align:center}
#web-ui-zukan-root .classify-items{grid-column:1/3;display:flex;gap:8px;justify-content:center}
#web-ui-zukan-root .classify-items button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px;font-weight:900}
#web-ui-zukan-root .timeline-demo{display:flex;align-items:center;overflow:auto;padding:9px}
#web-ui-zukan-root .timeline-demo button{width:43px;height:43px;border:0;border-radius:50%;background:#dbe5ef;font-weight:900;flex:none}
#web-ui-zukan-root .timeline-demo button.active{background:var(--main);color:#fff}
#web-ui-zukan-root .timeline-demo i{width:35px;height:4px;background:#cbd5e1;flex:none}
#web-ui-zukan-root .timeline-note, #web-ui-zukan-root .info-note{margin-top:8px;min-height:45px;padding:9px;border-radius:10px;background:#f8fafc;font-size:13px}
#web-ui-zukan-root .map-mini{position:relative;height:155px;border-radius:14px;background:#dff4ff}
#web-ui-zukan-root .map-mini span{position:absolute;font-size:42px;left:25px;top:45px}
#web-ui-zukan-root .map-mini button{position:absolute;border:0;border-radius:999px;background:var(--accent);padding:6px 9px;font-weight:900}
#web-ui-zukan-root .glossary input, #web-ui-zukan-root .free-answer textarea, #web-ui-zukan-root .observation textarea{width:100%;padding:9px;border:2px solid var(--line);border-radius:10px}
#web-ui-zukan-root .glossary-list{display:grid;gap:6px;margin-top:8px}
#web-ui-zukan-root .glossary-item{padding:8px;background:#f8fafc;border-radius:9px;font-size:13px}
#web-ui-zukan-root .photo-preview{height:90px;border-radius:12px;background:#eef4fb;display:grid;place-items:center;font-size:45px;margin-bottom:8px}
#web-ui-zukan-root .photo-gallery{grid-template-columns:repeat(3,1fr)}
#web-ui-zukan-root .photo-gallery button{font-size:28px}
#web-ui-zukan-root .comic-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
#web-ui-zukan-root .comic-panel{min-height:90px;border:2px solid #26384a;border-radius:8px;background:#fff;padding:7px;font-size:12px;display:flex;align-items:center;gap:5px}
#web-ui-zukan-root .observation-photo{height:80px;border-radius:11px;background:linear-gradient(#c8ebff 0 55%,#9fd477 55%);display:grid;place-items:center;font-size:38px;margin-bottom:8px}
#web-ui-zukan-root .story-map{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
#web-ui-zukan-root .story-node{min-height:62px;border-radius:11px;background:#dbe5ef;display:grid;place-items:center;text-align:center;font-size:11px;font-weight:900}
#web-ui-zukan-root .story-node.done{background:#dcfce7;color:#166534}
#web-ui-zukan-root .story-node.current{background:var(--main);color:#fff}
#web-ui-zukan-root .collection-grid{grid-template-columns:repeat(4,1fr)}
#web-ui-zukan-root .collection-item{aspect-ratio:1;border-radius:11px;background:#e2e8f0;display:grid;place-items:center;font-size:25px;filter:grayscale(1);opacity:.4}
#web-ui-zukan-root .collection-item.unlocked{background:#fff7db;filter:none;opacity:1;border:2px solid var(--accent)}
#web-ui-zukan-root .reveal-steps{display:grid;gap:7px}
#web-ui-zukan-root .reveal-steps button{border:0;border-radius:10px;padding:9px;background:#eaf3ff;color:var(--main);font-weight:900}
#web-ui-zukan-root .reveal-content{display:none;padding:9px;background:#f8fafc;border-radius:10px;font-size:13px}
#web-ui-zukan-root .reveal-content.show{display:block}
#web-ui-zukan-root .audio-player{display:flex;align-items:center;gap:9px;background:#f8fafc;border-radius:14px;padding:11px}
#web-ui-zukan-root .audio-player button{width:46px;height:46px;border:0;border-radius:50%;background:var(--main);color:#fff}
#web-ui-zukan-root .audio-bar{height:8px;flex:1;background:#dbe5ef;border-radius:99px;overflow:hidden}
#web-ui-zukan-root .audio-bar span{display:block;width:0;height:100%;background:var(--main2)}
#web-ui-zukan-root .confidence{display:flex;gap:8px;justify-content:center}
#web-ui-zukan-root .confidence button{border:1px solid var(--line);background:#fff;border-radius:11px;padding:9px;font-size:21px}
#web-ui-zukan-root .confidence button.selected{background:#eaf3ff;border-color:var(--main)}
body.admin-bar #web-ui-zukan-root header{top:32px}
@media(max-width:782px){body.admin-bar #web-ui-zukan-root header{top:46px}}
#web-ui-zukan-root{width:100%;min-height:100dvh;background:#f4f7fb;isolation:isolate}

#web-ui-zukan-root .layout-demo{position:relative;height:180px;border:2px dashed #b8c7d9;border-radius:14px;background:#f8fbff}
#web-ui-zukan-root .layout-demo .sample{position:absolute;background:#2f80ed;color:#fff;padding:8px 10px;border-radius:8px;font-weight:700;font-size:12px}
#web-ui-zukan-root .layout-demo.center .sample{left:50%;top:50%;transform:translate(-50%,-50%)}
#web-ui-zukan-root .layout-demo.top .sample{left:50%;top:8px;transform:translateX(-50%)}
#web-ui-zukan-root .layout-demo.bottom .sample{left:50%;bottom:8px;transform:translateX(-50%)}
#web-ui-zukan-root .layout-demo.left .sample{left:8px;top:50%;transform:translateY(-50%)}
#web-ui-zukan-root .layout-demo.right .sample{right:8px;top:50%;transform:translateY(-50%)}
#web-ui-zukan-root .layout-demo.tl .sample{left:8px;top:8px}
#web-ui-zukan-root .layout-demo.tr .sample{right:8px;top:8px}
#web-ui-zukan-root .layout-demo.bl .sample{left:8px;bottom:8px}
#web-ui-zukan-root .layout-demo.br .sample{right:8px;bottom:8px}