productppt.html 287 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032403340344035403640374038403940404041404240434044404540464047404840494050405140524053405440554056405740584059406040614062406340644065406640674068406940704071407240734074407540764077407840794080408140824083408440854086408740884089409040914092409340944095409640974098409941004101410241034104410541064107410841094110411141124113411441154116411741184119412041214122412341244125412641274128412941304131413241334134413541364137413841394140414141424143414441454146414741484149415041514152415341544155415641574158415941604161416241634164416541664167416841694170417141724173417441754176417741784179418041814182418341844185418641874188418941904191419241934194419541964197419841994200420142024203420442054206420742084209421042114212421342144215421642174218421942204221422242234224422542264227422842294230423142324233423442354236423742384239424042414242424342444245424642474248424942504251425242534254425542564257425842594260426142624263426442654266426742684269427042714272427342744275427642774278427942804281428242834284428542864287428842894290429142924293429442954296429742984299430043014302430343044305430643074308430943104311431243134314431543164317431843194320432143224323432443254326432743284329433043314332433343344335433643374338433943404341434243434344434543464347434843494350435143524353435443554356435743584359436043614362436343644365436643674368436943704371437243734374437543764377437843794380438143824383438443854386438743884389439043914392439343944395439643974398439944004401440244034404440544064407440844094410441144124413441444154416441744184419442044214422442344244425442644274428442944304431443244334434443544364437443844394440444144424443444444454446444744484449445044514452445344544455445644574458445944604461446244634464446544664467446844694470447144724473447444754476447744784479448044814482448344844485448644874488448944904491449244934494449544964497449844994500450145024503450445054506450745084509451045114512451345144515451645174518451945204521452245234524452545264527452845294530453145324533453445354536453745384539454045414542454345444545454645474548454945504551455245534554455545564557455845594560456145624563456445654566456745684569457045714572457345744575457645774578457945804581458245834584458545864587458845894590459145924593459445954596459745984599460046014602460346044605460646074608460946104611461246134614461546164617461846194620462146224623462446254626462746284629463046314632463346344635463646374638463946404641464246434644464546464647464846494650465146524653465446554656465746584659466046614662466346644665466646674668466946704671467246734674467546764677467846794680468146824683468446854686468746884689469046914692469346944695469646974698469947004701470247034704470547064707470847094710471147124713471447154716471747184719472047214722472347244725472647274728472947304731473247334734473547364737473847394740474147424743474447454746474747484749475047514752475347544755475647574758475947604761476247634764476547664767476847694770477147724773477447754776477747784779478047814782478347844785478647874788478947904791479247934794479547964797479847994800480148024803480448054806480748084809481048114812481348144815481648174818481948204821482248234824482548264827482848294830483148324833483448354836483748384839484048414842484348444845484648474848484948504851485248534854485548564857485848594860486148624863486448654866486748684869487048714872487348744875487648774878487948804881488248834884488548864887488848894890489148924893489448954896489748984899490049014902490349044905490649074908490949104911491249134914491549164917491849194920492149224923492449254926492749284929493049314932493349344935493649374938493949404941494249434944494549464947494849494950495149524953495449554956495749584959496049614962496349644965496649674968496949704971497249734974497549764977497849794980498149824983498449854986498749884989499049914992499349944995499649974998499950005001500250035004500550065007500850095010501150125013501450155016501750185019502050215022502350245025502650275028502950305031503250335034503550365037503850395040504150425043504450455046504750485049505050515052505350545055505650575058505950605061506250635064506550665067506850695070507150725073507450755076507750785079508050815082508350845085508650875088508950905091509250935094509550965097509850995100510151025103510451055106510751085109511051115112511351145115511651175118511951205121512251235124512551265127512851295130513151325133513451355136513751385139514051415142514351445145514651475148514951505151515251535154515551565157515851595160516151625163516451655166516751685169517051715172517351745175517651775178517951805181518251835184518551865187518851895190519151925193519451955196519751985199520052015202520352045205520652075208520952105211521252135214521552165217521852195220522152225223522452255226522752285229523052315232523352345235523652375238523952405241524252435244524552465247524852495250525152525253525452555256525752585259526052615262526352645265526652675268526952705271527252735274527552765277527852795280528152825283528452855286528752885289529052915292529352945295529652975298529953005301530253035304530553065307530853095310531153125313531453155316531753185319532053215322532353245325532653275328532953305331533253335334533553365337533853395340534153425343534453455346534753485349535053515352535353545355535653575358535953605361536253635364536553665367536853695370537153725373537453755376537753785379538053815382538353845385538653875388538953905391539253935394539553965397539853995400540154025403540454055406540754085409541054115412541354145415541654175418541954205421542254235424542554265427542854295430543154325433543454355436543754385439544054415442544354445445544654475448544954505451545254535454545554565457545854595460546154625463546454655466546754685469547054715472547354745475547654775478547954805481548254835484548554865487548854895490549154925493549454955496549754985499550055015502550355045505550655075508550955105511551255135514551555165517551855195520552155225523552455255526552755285529553055315532553355345535553655375538553955405541554255435544554555465547554855495550555155525553555455555556555755585559556055615562556355645565556655675568556955705571557255735574557555765577557855795580558155825583558455855586558755885589559055915592559355945595559655975598559956005601560256035604560556065607560856095610561156125613561456155616561756185619562056215622562356245625562656275628562956305631563256335634563556365637563856395640564156425643564456455646564756485649565056515652565356545655565656575658565956605661566256635664566556665667566856695670567156725673567456755676567756785679568056815682568356845685568656875688568956905691569256935694569556965697569856995700570157025703570457055706570757085709571057115712571357145715571657175718571957205721572257235724572557265727572857295730573157325733573457355736573757385739574057415742574357445745574657475748574957505751575257535754575557565757575857595760576157625763576457655766576757685769577057715772577357745775577657775778577957805781578257835784578557865787578857895790579157925793579457955796579757985799580058015802580358045805580658075808580958105811581258135814581558165817581858195820582158225823582458255826582758285829583058315832583358345835583658375838583958405841584258435844584558465847584858495850585158525853585458555856585758585859586058615862586358645865586658675868586958705871587258735874587558765877587858795880588158825883588458855886588758885889589058915892589358945895589658975898589959005901590259035904590559065907590859095910591159125913591459155916591759185919592059215922592359245925592659275928592959305931593259335934593559365937593859395940594159425943594459455946594759485949595059515952595359545955595659575958595959605961596259635964596559665967596859695970597159725973597459755976597759785979598059815982598359845985598659875988598959905991599259935994599559965997599859996000600160026003600460056006600760086009601060116012601360146015601660176018601960206021602260236024602560266027602860296030603160326033603460356036603760386039604060416042604360446045604660476048604960506051605260536054605560566057605860596060606160626063606460656066606760686069607060716072607360746075607660776078
  1. <!DOCTYPE html>
  2. <!-- saved from url=(0031)http://127.0.0.1:5500/page.html -->
  3. <html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <title>铁卫哨兵——工业智能检测系统</title>
  6. <link rel="stylesheet" href="./铁卫哨兵——工业智能检测系统1_files/reveal.min.css">
  7. <link rel="stylesheet" href="./铁卫哨兵——工业智能检测系统1_files/dark.min.css">
  8. <link rel="stylesheet" href="./铁卫哨兵——工业智能检测系统1_files/all.min.css">
  9. <script src="./铁卫哨兵——工业智能检测系统1_files/echarts.min.js.下载"></script>
  10. <style>
  11. :root {
  12. --primary-color: #4A4A4A; /* 哑光银灰 - 主色 */
  13. --secondary-color: #FF2E2E; /* 雷达红 - 辅色 */
  14. --accent-color: #FF7D00; /* 警示橙 */
  15. --cyber-blue: #0D19A3; /* 量子蓝 */
  16. --text-default-color: #4238b1;
  17. --background-color: #207f31;
  18. }
  19. body {
  20. font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  21. background-color: var(--background-color);
  22. }
  23. .reveal {
  24. background-color: var(--background-color);
  25. color: var(--text-default-color);
  26. }
  27. .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
  28. color: var(--primary-color);
  29. font-weight: bold;
  30. text-transform: uppercase;
  31. letter-spacing: 2px;
  32. }
  33. .reveal p {
  34. color: var(--secondary-color);
  35. line-height: 1.8;
  36. }
  37. /* 自定义背景样式 */
  38. .template-cover {
  39. background: linear-gradient(to bottom, #121212, #333333);
  40. background-image:
  41. url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='metal' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 0h40v40H0z' fill='%234A4A4A' fill-opacity='0.3'/%3E%3Cpath d='M20 0v40M0 20h40' stroke='%23666' stroke-width='0.5'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23metal)'/%3E%3C/svg%3E"),
  42. radial-gradient(circle at center, rgba(13, 25, 163, 0.2) 0%, rgba(0, 0, 0, 0.6) 100%);
  43. position: relative;
  44. }
  45. .template-cover::before {
  46. content: "";
  47. position: absolute;
  48. top: 0;
  49. left: 0;
  50. width: 100%;
  51. height: 100%;
  52. background:
  53. radial-gradient(circle at 20% 30%, rgba(255, 125, 0, 0.3) 0%, transparent 30%),
  54. radial-gradient(circle at 80% 70%, rgba(255, 46, 46, 0.2) 0%, transparent 20%);
  55. z-index: 1;
  56. }
  57. .template-page {
  58. background: var(--background-color);
  59. position: relative;
  60. }
  61. .template-page::before {
  62. content: "";
  63. position: absolute;
  64. top: 0;
  65. left: 0;
  66. width: 100%;
  67. height: 100%;
  68. background:
  69. linear-gradient(to bottom, var(--primary-color) 0%, transparent 10%),
  70. linear-gradient(to top, var(--primary-color) 0%, transparent 10%),
  71. linear-gradient(to right, var(--accent-color) 0%, transparent 10%),
  72. linear-gradient(to left, var(--cyber-blue) 0%, transparent 10%);
  73. z-index: 0;
  74. }
  75. .content-box {
  76. position: relative;
  77. z-index: 2;
  78. padding: 20px;
  79. background-color: rgba(255, 255, 255, 0.9);
  80. border-radius: 10px;
  81. box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  82. }
  83. .grid-container {
  84. display: flex;
  85. flex-wrap: wrap;
  86. justify-content: space-between;
  87. gap: 20px;
  88. }
  89. .grid-item {
  90. flex: 1 1 calc(50% - 10px);
  91. min-width: 300px;
  92. }
  93. .highlight {
  94. color: var(--accent-color);
  95. font-weight: bold;
  96. }
  97. .tech-card {
  98. background-color: rgba(74, 74, 74, 0.1);
  99. border-left: 4px solid var(--secondary-color);
  100. padding: 15px;
  101. border-radius: 0 8px 8px 0;
  102. transition: transform 0.3s ease;
  103. }
  104. .tech-card:hover {
  105. transform: translateY(-5px);
  106. }
  107. .data-pair {
  108. display: flex;
  109. justify-content: space-between;
  110. align-items: center;
  111. margin: 15px 0;
  112. }
  113. .data-value {
  114. font-size: 1.5rem;
  115. font-weight: bold;
  116. }
  117. .data-label {
  118. color: var(--primary-color);
  119. font-weight: normal;
  120. }
  121. .comparison-table {
  122. width: 100%;
  123. border-collapse: collapse;
  124. margin: 20px 0;
  125. }
  126. .comparison-table th, .comparison-table td {
  127. padding: 12px 15px;
  128. text-align: left;
  129. border-bottom: 1px solid #eee;
  130. }
  131. .comparison-table th {
  132. background-color: var(--primary-color);
  133. color: white;
  134. }
  135. .comparison-table tr:nth-child(even) {
  136. background-color: rgba(74, 74, 74, 0.05);
  137. }
  138. .highlight-row {
  139. background-color: rgba(255, 46, 46, 0.1) !important;
  140. }
  141. .timeline {
  142. position: relative;
  143. max-width: 800px;
  144. margin: 0 auto;
  145. }
  146. .timeline::after {
  147. content: '';
  148. position: absolute;
  149. width: 4px;
  150. background-color: var(--primary-color);
  151. top: 0;
  152. bottom: 0;
  153. left: 50%;
  154. margin-left: -2px;
  155. }
  156. .timeline-item {
  157. padding: 10px 40px;
  158. position: relative;
  159. width: 50%;
  160. box-sizing: border-box;
  161. }
  162. .timeline-item:nth-child(odd) {
  163. left: 0;
  164. }
  165. .timeline-item:nth-child(even) {
  166. left: 50%;
  167. }
  168. .timeline-item::after {
  169. content: '';
  170. position: absolute;
  171. width: 20px;
  172. height: 20px;
  173. right: -10px;
  174. background-color: var(--background-color);
  175. border: 4px solid var(--secondary-color);
  176. top: 15px;
  177. border-radius: 50%;
  178. z-index: 1;
  179. }
  180. .timeline-item:nth-child(even)::after {
  181. left: -10px;
  182. }
  183. .timeline-content {
  184. padding: 20px;
  185. background-color: white;
  186. position: relative;
  187. border-radius: 8px;
  188. box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  189. }
  190. .timeline-content::before {
  191. content: '';
  192. position: absolute;
  193. width: 0;
  194. height: 0;
  195. border-style: solid;
  196. }
  197. .timeline-item:nth-child(odd) .timeline-content::before {
  198. border-width: 10px 15px 10px 0;
  199. border-color: transparent var(--secondary-color) transparent transparent;
  200. right: 15px;
  201. top: 15px;
  202. }
  203. .timeline-item:nth-child(even) .timeline-content::before {
  204. border-width: 10px 0 10px 15px;
  205. border-color: transparent transparent transparent var(--secondary-color);
  206. left: 15px;
  207. top: 15px;
  208. }
  209. .weapon-card {
  210. display: flex;
  211. align-items: center;
  212. gap: 15px;
  213. margin: 15px 0;
  214. }
  215. .weapon-icon {
  216. width: 50px;
  217. height: 50px;
  218. background-color: var(--primary-color);
  219. color: white;
  220. border-radius: 50%;
  221. display: flex;
  222. align-items: center;
  223. justify-content: center;
  224. font-size: 1.5rem;
  225. }
  226. .weapon-content h4 {
  227. margin-top: 0;
  228. }
  229. @media screen and (max-width: 768px) {
  230. .timeline::after {
  231. left: 31px;
  232. }
  233. .timeline-item {
  234. width: 100%;
  235. padding-left: 70px;
  236. padding-right: 25px;
  237. }
  238. .timeline-item:nth-child(even) {
  239. left: 0;
  240. }
  241. .timeline-item:nth-child(odd)::after,
  242. .timeline-item:nth-child(even)::after {
  243. left: 21px;
  244. }
  245. .timeline-item:nth-child(odd) .timeline-content::before,
  246. .timeline-item:nth-child(even) .timeline-content::before {
  247. border-width: 10px 15px 10px 0;
  248. border-color: transparent var(--secondary-color) transparent transparent;
  249. right: 15px;
  250. left: auto;
  251. }
  252. }
  253. </style>
  254. <style type="text/css">.wps_ai_link[data-v-5122f198]{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,PingFang SC,Noto Sans,Noto Sans CJK SC,Microsoft YaHei,微软雅黑,sans-serif;padding:0;min-width:unset;min-height:unset;position:fixed;left:-100px;top:-100px;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;width:0;height:26px;border:1px solid #dae4e0;background:#fff;overflow:hidden;margin-left:12px;transition:translateX(100%) .5s ease;z-index:2147483647}.wps_ai_link .wps_ai_link_title[data-v-5122f198]{margin-left:4px;color:#5f6368;text-align:center;font-size:14px;font-style:normal;font-weight:400;line-height:16px}.wps_ai_link[data-v-5122f198]:hover{background:#f0f0f0}.wps_ai_link[data-v-5122f198]:active{background:#dadada}.dark_skin[data-v-5122f198]{border:1px solid hsla(0,0%,100%,.5);background:#3a3b3e}.dark_skin .wps_ai_link_title[data-v-5122f198]{color:#fff}.dark_skin[data-v-5122f198]:hover{background:#2d2e31}.dark_skin[data-v-5122f198]:active{background:#353639}</style><style type="text/css"></style><style type="text/css">pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}
  255. /*!
  256. Theme: GitHub
  257. Description: Light theme as seen on github.com
  258. Author: github.com
  259. Maintainer: @Hirse
  260. Updated: 2021-05-15
  261. Outdated base version: https://github.com/primer/github-syntax-light
  262. Current colors taken from GitHub's CSS
  263. */.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}</style><style type="text/css">.hljs-ln{border-collapse:collapse}.hljs-ln-n:before{content:attr(data-line-number)}</style><style data-id="immersive-translate-input-injected-css">.immersive-translate-input {
  264. position: absolute;
  265. top: 0;
  266. right: 0;
  267. left: 0;
  268. bottom: 0;
  269. z-index: 2147483647;
  270. display: flex;
  271. justify-content: center;
  272. align-items: center;
  273. }
  274. .immersive-translate-attach-loading::after {
  275. content: " ";
  276. --loading-color: #f78fb6;
  277. width: 6px;
  278. height: 6px;
  279. border-radius: 50%;
  280. display: block;
  281. margin: 12px auto;
  282. position: relative;
  283. color: white;
  284. left: -100px;
  285. box-sizing: border-box;
  286. animation: immersiveTranslateShadowRolling 1.5s linear infinite;
  287. position: absolute;
  288. top: 50%;
  289. left: 50%;
  290. transform: translate(-2000%, -50%);
  291. z-index: 100;
  292. }
  293. .immersive-translate-loading-spinner {
  294. vertical-align: middle !important;
  295. width: 10px !important;
  296. height: 10px !important;
  297. display: inline-block !important;
  298. margin: 0 4px !important;
  299. border: 2px rgba(221, 244, 255, 0.6) solid !important;
  300. border-top: 2px rgba(0, 0, 0, 0.375) solid !important;
  301. border-left: 2px rgba(0, 0, 0, 0.375) solid !important;
  302. border-radius: 50% !important;
  303. padding: 0 !important;
  304. -webkit-animation: immersive-translate-loading-animation 0.6s infinite linear !important;
  305. animation: immersive-translate-loading-animation 0.6s infinite linear !important;
  306. }
  307. @-webkit-keyframes immersive-translate-loading-animation {
  308. from {
  309. -webkit-transform: rotate(0deg);
  310. }
  311. to {
  312. -webkit-transform: rotate(359deg);
  313. }
  314. }
  315. @keyframes immersive-translate-loading-animation {
  316. from {
  317. transform: rotate(0deg);
  318. }
  319. to {
  320. transform: rotate(359deg);
  321. }
  322. }
  323. .immersive-translate-input-loading {
  324. --loading-color: #f78fb6;
  325. width: 6px;
  326. height: 6px;
  327. border-radius: 50%;
  328. display: block;
  329. margin: 12px auto;
  330. position: relative;
  331. color: white;
  332. left: -100px;
  333. box-sizing: border-box;
  334. animation: immersiveTranslateShadowRolling 1.5s linear infinite;
  335. }
  336. @keyframes immersiveTranslateShadowRolling {
  337. 0% {
  338. box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0),
  339. 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  340. }
  341. 12% {
  342. box-shadow: 100px 0 var(--loading-color), 0px 0 rgba(255, 255, 255, 0),
  343. 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  344. }
  345. 25% {
  346. box-shadow: 110px 0 var(--loading-color), 100px 0 var(--loading-color),
  347. 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
  348. }
  349. 36% {
  350. box-shadow: 120px 0 var(--loading-color), 110px 0 var(--loading-color),
  351. 100px 0 var(--loading-color), 0px 0 rgba(255, 255, 255, 0);
  352. }
  353. 50% {
  354. box-shadow: 130px 0 var(--loading-color), 120px 0 var(--loading-color),
  355. 110px 0 var(--loading-color), 100px 0 var(--loading-color);
  356. }
  357. 62% {
  358. box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 var(--loading-color),
  359. 120px 0 var(--loading-color), 110px 0 var(--loading-color);
  360. }
  361. 75% {
  362. box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
  363. 130px 0 var(--loading-color), 120px 0 var(--loading-color);
  364. }
  365. 87% {
  366. box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
  367. 200px 0 rgba(255, 255, 255, 0), 130px 0 var(--loading-color);
  368. }
  369. 100% {
  370. box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0),
  371. 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
  372. }
  373. }
  374. .immersive-translate-toast {
  375. display: flex;
  376. position: fixed;
  377. z-index: 2147483647;
  378. left: 0;
  379. right: 0;
  380. top: 1%;
  381. width: fit-content;
  382. padding: 12px 20px;
  383. margin: auto;
  384. overflow: auto;
  385. background: #fef6f9;
  386. box-shadow: 0px 4px 10px 0px rgba(0, 10, 30, 0.06);
  387. font-size: 15px;
  388. border-radius: 8px;
  389. color: #333;
  390. }
  391. .immersive-translate-toast-content {
  392. display: flex;
  393. flex-direction: row;
  394. align-items: center;
  395. }
  396. .immersive-translate-toast-hidden {
  397. margin: 0 20px 0 72px;
  398. text-decoration: underline;
  399. cursor: pointer;
  400. }
  401. .immersive-translate-toast-close {
  402. color: #666666;
  403. font-size: 20px;
  404. font-weight: bold;
  405. padding: 0 10px;
  406. cursor: pointer;
  407. }
  408. @media screen and (max-width: 768px) {
  409. .immersive-translate-toast {
  410. top: 0;
  411. padding: 12px 0px 0 10px;
  412. }
  413. .immersive-translate-toast-content {
  414. flex-direction: column;
  415. text-align: center;
  416. }
  417. .immersive-translate-toast-hidden {
  418. margin: 10px auto;
  419. }
  420. }
  421. .immersive-translate-modal {
  422. display: none;
  423. position: fixed;
  424. z-index: 2147483647;
  425. left: 0;
  426. top: 0;
  427. width: 100%;
  428. height: 100%;
  429. overflow: auto;
  430. background-color: rgb(0, 0, 0);
  431. background-color: rgba(0, 0, 0, 0.4);
  432. font-size: 15px;
  433. }
  434. .immersive-translate-modal-content {
  435. background-color: #fefefe;
  436. margin: 10% auto;
  437. padding: 40px 24px 24px;
  438. border: 1px solid #888;
  439. border-radius: 10px;
  440. width: 80%;
  441. max-width: 270px;
  442. font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
  443. "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
  444. "Segoe UI Symbol", "Noto Color Emoji";
  445. position: relative;
  446. }
  447. @media screen and (max-width: 768px) {
  448. .immersive-translate-modal-content {
  449. margin: 50% auto !important;
  450. }
  451. }
  452. .immersive-translate-modal .immersive-translate-modal-content-in-input {
  453. max-width: 500px;
  454. }
  455. .immersive-translate-modal-content-in-input .immersive-translate-modal-body {
  456. text-align: left;
  457. max-height: unset;
  458. }
  459. .immersive-translate-modal-title {
  460. text-align: center;
  461. font-size: 16px;
  462. font-weight: 700;
  463. color: #333333;
  464. }
  465. .immersive-translate-modal-body {
  466. text-align: center;
  467. font-size: 14px;
  468. font-weight: 400;
  469. color: #333333;
  470. word-break: break-all;
  471. margin-top: 24px;
  472. }
  473. @media screen and (max-width: 768px) {
  474. .immersive-translate-modal-body {
  475. max-height: 250px;
  476. overflow-y: auto;
  477. }
  478. }
  479. .immersive-translate-close {
  480. color: #666666;
  481. position: absolute;
  482. right: 16px;
  483. top: 16px;
  484. font-size: 20px;
  485. font-weight: bold;
  486. }
  487. .immersive-translate-close:hover,
  488. .immersive-translate-close:focus {
  489. color: black;
  490. text-decoration: none;
  491. cursor: pointer;
  492. }
  493. .immersive-translate-modal-footer {
  494. display: flex;
  495. justify-content: center;
  496. flex-wrap: wrap;
  497. margin-top: 24px;
  498. }
  499. .immersive-translate-btn {
  500. width: fit-content;
  501. color: #fff;
  502. background-color: #ea4c89;
  503. border: none;
  504. font-size: 16px;
  505. margin: 0 8px;
  506. padding: 9px 30px;
  507. border-radius: 5px;
  508. display: flex;
  509. align-items: center;
  510. justify-content: center;
  511. cursor: pointer;
  512. transition: background-color 0.3s ease;
  513. }
  514. .immersive-translate-btn:hover {
  515. background-color: #f082ac;
  516. }
  517. .immersive-translate-btn:disabled {
  518. opacity: 0.6;
  519. cursor: not-allowed;
  520. }
  521. .immersive-translate-btn:disabled:hover {
  522. background-color: #ea4c89;
  523. }
  524. .immersive-translate-cancel-btn {
  525. /* gray color */
  526. background-color: rgb(89, 107, 120);
  527. }
  528. .immersive-translate-cancel-btn:hover {
  529. background-color: hsl(205, 20%, 32%);
  530. }
  531. .immersive-translate-action-btn {
  532. background-color: transparent;
  533. color: #ea4c89;
  534. border: 1px solid #ea4c89;
  535. }
  536. .immersive-translate-btn svg {
  537. margin-right: 5px;
  538. }
  539. .immersive-translate-link {
  540. cursor: pointer;
  541. user-select: none;
  542. -webkit-user-drag: none;
  543. text-decoration: none;
  544. color: #007bff;
  545. -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  546. }
  547. .immersive-translate-primary-link {
  548. cursor: pointer;
  549. user-select: none;
  550. -webkit-user-drag: none;
  551. text-decoration: none;
  552. color: #ea4c89;
  553. -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  554. }
  555. .immersive-translate-modal input[type="radio"] {
  556. margin: 0 6px;
  557. cursor: pointer;
  558. }
  559. .immersive-translate-modal label {
  560. cursor: pointer;
  561. }
  562. .immersive-translate-close-action {
  563. position: absolute;
  564. top: 2px;
  565. right: 0px;
  566. cursor: pointer;
  567. }
  568. .imt-image-status {
  569. background-color: rgba(0, 0, 0, 0.5) !important;
  570. display: flex !important;
  571. flex-direction: column !important;
  572. align-items: center !important;
  573. justify-content: center !important;
  574. border-radius: 16px !important;
  575. }
  576. .imt-image-status img,
  577. .imt-image-status svg,
  578. .imt-img-loading {
  579. width: 28px !important;
  580. height: 28px !important;
  581. margin: 0 0 8px 0 !important;
  582. min-height: 28px !important;
  583. min-width: 28px !important;
  584. position: relative !important;
  585. }
  586. .imt-img-loading {
  587. background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAMAAACfWMssAAAAtFBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////oK74hAAAAPHRSTlMABBMIDyQXHwyBfFdDMSw+OjXCb+5RG51IvV/k0rOqlGRM6KKMhdvNyZBz9MaupmxpWyj437iYd/yJVNZeuUC7AAACt0lEQVRIx53T2XKiUBCA4QYOiyCbiAsuuGBcYtxiYtT3f6/pbqoYHVFO5r+iivpo6DpAWYpqeoFfr9f90DsYAuRSWkFnPO50OgR9PwiCUFcl2GEcx+N/YBh6pvKaefHlUgZd1zVe0NbYcQjGBfzrPE8Xz8aF+71D8gG6DHFPpc4a7xFiCDuhaWgKgGIJQ3d5IMGDrpS4S5KgpIm+en9f6PlAhKby4JwEIxlYJV9h5k5nee9GoxHJ2IDSNB0dwdad1NAxDJ/uXDHYmebdk4PdbkS58CIVHdYSUHTYYRWOJblWSyu2lmy3KNFVJNBhxcuGW4YBVCbYGRZwIooipHsNqjM4FbgOQqQqSKQQU9V8xmi1QlgHqQQ6DDBvRUVCDirs+EzGDGOQTCATgtYTnbCVLgsVgRE0T1QE0qHCFAht2z6dLvJQs3Lo2FQoDxWNUiBhaP4eRgwNkI+dAjVOA/kUrIDwf3CG8NfNOE0eiFotSuo+rBiq8tD9oY4Qzc6YJw99hl1wzpQvD7ef2M8QgnOGJfJw+EltQc+oX2yn907QB22WZcvlUpd143dqQu+8pCJZuGE4xCuPXJqqcs5sNpsI93Rmzym1k4Npk+oD1SH3/a3LOK/JpUBpWfqNySxWzCfNCUITuDG5dtuphrUJ1myeIE9bIsPiKrfqTai5WZxbhtNphYx6GEIHihyGFTI69lje/rxajdh0s0msZ0zYxyPLhYCb1CyHm9Qsd2H37Y3lugVwL9kNh8Ot8cha6fUNQ8nuXi5z9/ExsAO4zQrb/ev1yrCB7lGyQzgYDGuxq1toDN/JGvN+HyWNHKB7zEoK+PX11e12G431erGYzwmytAWU56fkMHY5JJnDRR2eZji3AwtIcrEV8Cojat/BdQ7XOwGV1e1hDjGGjXbdArm8uJZtCH5MbcctVX8A1WpqumJHwckAAAAASUVORK5CYII=");
  588. background-size: 28px 28px;
  589. animation: image-loading-rotate 1s linear infinite !important;
  590. }
  591. .imt-image-status span {
  592. color: var(--bg-2, #fff) !important;
  593. font-size: 14px !important;
  594. line-height: 14px !important;
  595. font-weight: 500 !important;
  596. font-family: "PingFang SC", Arial, sans-serif !important;
  597. }
  598. @keyframes image-loading-rotate {
  599. from {
  600. transform: rotate(360deg);
  601. }
  602. to {
  603. transform: rotate(0deg);
  604. }
  605. }
  606. </style></head>
  607. <body>
  608. <div class="reveal">
  609. <div class="slides">
  610. <!-- 封面页 -->
  611. <section class="template-cover" data-background-transition="slide">
  612. <div class="content-box" style="text-align: center; max-width: 800px; margin: 0 auto;">
  613. <h1 style="color: rgb(30, 165, 131); text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);">铁卫哨兵</h1>
  614. <h3 style="color: rgb(13, 79, 66); margin-bottom: 40px; text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);">工业智能检测系统</h3>
  615. <p style="color: rgba(23, 74, 118, 0.8); font-size: 1.2rem; max-width: 600px; margin: 0 auto;">毫秒级故障排查检测,年省百万运维成本</p>
  616. <div style="margin-top: 60px; display: flex; justify-content: center; gap: 20px;">
  617. <div class="weapon-icon" style="background-color: var(--accent-color);">
  618. <i class="fas fa-shield-alt"></i>
  619. </div>
  620. <div class="weapon-icon" style="background-color: var(--cyber-blue);">
  621. <i class="fas fa-bolt"></i>
  622. </div>
  623. <div class="weapon-icon" style="background-color: var(--secondary-color);">
  624. <i class="fas fa-exclamation-triangle"></i>
  625. </div>
  626. </div>
  627. </div>
  628. </section>
  629. <!-- 目录页 -->
  630. <section class="template-page" data-background-transition="slide">
  631. <div class="content-box">
  632. <h2 style="text-align: center; margin-bottom: 40px;">目录</h2>
  633. <div style="display: flex; justify-content: center; align-items: center; height: 300px; position: relative;">
  634. <svg width="400" height="300" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
  635. <circle cx="200" cy="150" r="100" fill="none" stroke="var(--primary-color)" stroke-width="4"></circle>
  636. <path d="M200 50 L200 100" stroke="var(--primary-color)" stroke-width="4" stroke-dasharray="5,5"></path>
  637. <path d="M200 200 L200 250" stroke="var(--primary-color)" stroke-width="4" stroke-dasharray="5,5"></path>
  638. <path d="M50 150 L100 150" stroke="var(--primary-color)" stroke-width="4" stroke-dasharray="5,5"></path>
  639. <path d="M300 150 L350 150" stroke="var(--primary-color)" stroke-width="4" stroke-dasharray="5,5"></path>
  640. <circle cx="200" cy="75" r="15" fill="var(--secondary-color)"></circle>
  641. <circle cx="200" cy="225" r="15" fill="var(--secondary-color)"></circle>
  642. <circle cx="75" cy="150" r="15" fill="var(--secondary-color)"></circle>
  643. <circle cx="325" cy="150" r="15" fill="var(--secondary-color)"></circle>
  644. <!-- Code injected by live-server -->
  645. <script>
  646. // &lt;-- For SVG support
  647. if ('WebSocket' in window) {
  648. (function () {
  649. function refreshCSS() {
  650. var sheets = [].slice.call(document.getElementsByTagName("link"));
  651. var head = document.getElementsByTagName("head")[0];
  652. for (var i = 0; i &lt; sheets.length; ++i) {
  653. var elem = sheets[i];
  654. var parent = elem.parentElement || head;
  655. parent.removeChild(elem);
  656. var rel = elem.rel;
  657. if (elem.href &amp;&amp; typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
  658. var url = elem.href.replace(/(&amp;|\?)_cacheOverride=\d+/, '');
  659. elem.href = url + (url.indexOf('?') &gt;= 0 ? '&amp;' : '?') + '_cacheOverride=' + (new Date().valueOf());
  660. }
  661. parent.appendChild(elem);
  662. }
  663. }
  664. var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
  665. var address = protocol + window.location.host + window.location.pathname + '/ws';
  666. var socket = new WebSocket(address);
  667. socket.onmessage = function (msg) {
  668. if (msg.data == 'reload') window.location.reload();
  669. else if (msg.data == 'refreshcss') refreshCSS();
  670. };
  671. if (sessionStorage &amp;&amp; !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
  672. console.log('Live reload enabled.');
  673. sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
  674. }
  675. })();
  676. }
  677. else {
  678. console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
  679. }
  680. //
  681. </script>
  682. </svg>
  683. <div style="position: absolute; width: 100%; text-align: center; top: 30%;">
  684. <p style="font-size: 1.5rem; color: var(--primary-color);">工业痛点</p>
  685. </div>
  686. <div style="position: absolute; width: 100%; text-align: center; top: 70%;">
  687. <p style="font-size: 1.5rem; color: var(--primary-color);">价值验证</p>
  688. </div>
  689. <div style="position: absolute; width: 100%; text-align: center; left: 20%; top: 50%; transform: rotate(-90deg); transform-origin: left center;">
  690. <p style="font-size: 1.5rem; color: var(--primary-color); writing-mode: vertical-rl; text-orientation: mixed;">核心技术</p>
  691. </div>
  692. <div style="position: absolute; width: 100%; text-align: center; right: 20%; top: 50%; transform: rotate(90deg); transform-origin: right center;">
  693. <p style="font-size: 1.5rem; color: var(--primary-color); writing-mode: vertical-rl; text-orientation: mixed;">场景实战</p>
  694. </div>
  695. </div>
  696. <div style="margin-top: 40px; display: flex; justify-content: space-around; flex-wrap: wrap; gap: 20px;">
  697. <div class="tech-card" style="flex: 1 1 calc(25% - 20px); min-width: 200px;">
  698. <h3>1. 工业痛点</h3>
  699. <p>设备失控的百万成本黑洞</p>
  700. </div>
  701. <div class="tech-card" style="flex: 1 1 calc(25% - 20px); min-width: 200px;">
  702. <h3>2. 核心技术</h3>
  703. <p>铁卫哨兵技术矩阵</p>
  704. </div>
  705. <div class="tech-card" style="flex: 1 1 calc(25% - 20px); min-width: 200px;">
  706. <h3>3. 场景实战</h3>
  707. <p>从预警到决策的闭环</p>
  708. </div>
  709. <div class="tech-card" style="flex: 1 1 calc(25% - 20px); min-width: 200px;">
  710. <h3>4. 价值验证</h3>
  711. <p>数据驱动的运维革命</p>
  712. </div>
  713. </div>
  714. </div>
  715. </section>
  716. <!-- 工业痛点 - 成本危机可视化 -->
  717. <section class="template-page" data-background-transition="slide">
  718. <div class="content-box">
  719. <h2>1. 工业痛点</h2>
  720. <h3>成本危机可视化</h3>
  721. <div class="grid-container">
  722. <div class="grid-item">
  723. <h4>人工巡检效率分析</h4>
  724. <div class="data-pair">
  725. <span class="data-label">漏检率</span>
  726. <span class="data-value highlight">&gt;30%</span>
  727. </div>
  728. <div class="data-pair">
  729. <span class="data-label">突发停机损失</span>
  730. <span class="data-value highlight">$38,000/小时</span>
  731. </div>
  732. <div class="data-pair">
  733. <span class="data-label">年平均停机时间</span>
  734. <span class="data-value highlight">120小时</span>
  735. </div>
  736. <div class="data-pair">
  737. <span class="data-label">直接经济损失</span>
  738. <span class="data-value highlight">$456万/年</span>
  739. </div>
  740. </div>
  741. <div class="grid-item">
  742. <h4>传统方案效能瓶颈</h4>
  743. <div class="data-pair">
  744. <span class="data-label">误报率</span>
  745. <span class="data-value highlight">&gt;40%</span>
  746. </div>
  747. <div class="data-pair">
  748. <span class="data-label">无效运维耗时</span>
  749. <span class="data-value highlight">200h/月</span>
  750. </div>
  751. <div class="data-pair">
  752. <span class="data-label">维护成本增长率</span>
  753. <span class="data-value highlight">20%/年</span>
  754. </div>
  755. <div class="data-pair">
  756. <span class="data-label">产能损失</span>
  757. <span class="data-value highlight">15%/年</span>
  758. </div>
  759. </div>
  760. </div>
  761. <div style="margin-top: 30px; text-align: center;">
  762. <img src="./铁卫哨兵——工业智能检测系统1_files/119-800x400.jpg" alt="故障设备示意图" style="max-width: 100%; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);" data-extentions-extra-ocr-id="98dd5cff0432eebe2e5f9f20e8e0f13a">
  763. <p style="margin-top: 10px; font-size: 0.9rem; color: var(--primary-color);">故障设备爆炸分解图(标注隐藏损伤点)</p>
  764. </div>
  765. </div>
  766. </section>
  767. <!-- 工业痛点 - 多维痛点拆解 -->
  768. <section class="template-page" data-background-transition="slide">
  769. <div class="content-box">
  770. <h2>多维痛点拆解</h2>
  771. <div class="grid-container">
  772. <div class="grid-item">
  773. <h4>设备维度痛点</h4>
  774. <p>机械、电气、热工异常耦合,传统单点检测无法识别复合故障,如轴承磨损引发的齿轮箱振动异常与温度升高交叉影响。</p>
  775. </div>
  776. <div class="grid-item">
  777. <h4>时间维度痛点</h4>
  778. <p>缺乏毫秒级响应能力,从异常发生到人工发现通常需要数小时,导致故障蔓延,如液压系统泄漏未及时发现引发设备卡死。</p>
  779. </div>
  780. </div>
  781. <div class="grid-container">
  782. <div class="grid-item">
  783. <h4>成本维度痛点</h4>
  784. <p>维护费用年增长20%,主要源于被动维修成本高企;同时产能损失15%,设备非计划停机导致订单交付延迟。</p>
  785. </div>
  786. <div class="grid-item">
  787. <h4>数据维度痛点</h4>
  788. <p>设备数据碎片化,缺乏统一分析平台,无法形成故障预测模型,经验依赖严重,新员工培训成本高。</p>
  789. </div>
  790. </div>
  791. <div style="margin-top: 30px; text-align: center;">
  792. <img src="./铁卫哨兵——工业智能检测系统1_files/118-800x300.jpg" alt="故障树根因分析" style="max-width: 100%; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);" data-extentions-extra-ocr-id="93d804b5e5b16c74e9b977d065c88fef">
  793. <p style="margin-top: 10px; font-size: 0.9rem; color: var(--primary-color);">故障树根因分析动效(从叶片断裂溯源至轴承磨损)</p>
  794. </div>
  795. </div>
  796. </section>
  797. <!-- 工业痛点 - 竞品致命伤 -->
  798. <section class="template-page" data-background-transition="slide">
  799. <div class="content-box">
  800. <h2>竞品致命伤</h2>
  801. <p style="text-align: center; margin-bottom: 30px; font-size: 1.2rem;">铁卫哨兵 vs 德国工业检测方案</p>
  802. <div style="overflow-x: auto;">
  803. <table class="comparison-table" data-extentions-extra-tablecapture-id="427332">
  804. <thead>
  805. <tr>
  806. <th>能力</th>
  807. <th>德国方案</th>
  808. <th>铁卫哨兵</th>
  809. </tr>
  810. </thead>
  811. <tbody>
  812. <tr>
  813. <td>响应延迟</td>
  814. <td>2.5s</td>
  815. <td class="highlight-row"><strong>0.05s</strong></td>
  816. </tr>
  817. <tr>
  818. <td>复合故障检出率</td>
  819. <td>68%</td>
  820. <td class="highlight-row"><strong>94%</strong></td>
  821. </tr>
  822. <tr>
  823. <td>多设备协同监测</td>
  824. <td>仅支持单设备</td>
  825. <td class="highlight-row"><strong>支持产线级联动分析</strong></td>
  826. </tr>
  827. <tr>
  828. <td>国产化成本</td>
  829. <td>$500k/产线</td>
  830. <td class="highlight-row"><strong>$50k/产线</strong></td>
  831. </tr>
  832. <tr>
  833. <td>AI预测模型</td>
  834. <td>静态阈值</td>
  835. <td class="highlight-row"><strong>动态自适应调参</strong></td>
  836. </tr>
  837. <tr>
  838. <td>部署周期</td>
  839. <td>12-16周</td>
  840. <td class="highlight-row"><strong>2-4周</strong></td>
  841. </tr>
  842. </tbody>
  843. </table>
  844. </div>
  845. <div style="display: flex; justify-content: center; align-items: center; margin: 40px 0;">
  846. <div style="width: 300px; height: 200px; position: relative;">
  847. <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--primary-color); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">
  848. 进口设备
  849. </div>
  850. <div style="position: absolute; top: 50px; left: 50px; width: 200px; height: 10px; background-color: var(--secondary-color); transform: rotate(45deg); border-radius: 5px; animation: break 1s ease-in-out;"></div>
  851. </div>
  852. <div style="width: 100px; height: 100px; margin: 0 20px; display: flex; align-items: center; justify-content: center; background-color: var(--accent-color); color: white; border-radius: 50%; font-size: 2rem;">
  853. <i class="fas fa-shield-alt"></i>
  854. </div>
  855. <div style="width: 300px; height: 200px; position: relative;">
  856. <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--cyber-blue); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">
  857. 铁卫哨兵
  858. </div>
  859. </div>
  860. </div>
  861. <script>
  862. function animateBreak() {
  863. const breakLine = document.querySelector('.comparison-table + div .highlight-row + div .highlight-row + div .highlight-row + div .highlight-row + div .highlight-row + div .highlight-row + div .comparison-table + div div:nth-child(1) div:nth-child(2)');
  864. breakLine.style.animation = 'break 1s ease-in-out';
  865. }
  866. document.addEventListener('DOMContentLoaded', animateBreak);
  867. </script>
  868. </div>
  869. </section>
  870. <!-- 核心技术 - 技术架构 -->
  871. <section class="template-page" data-background-transition="slide">
  872. <div class="content-box">
  873. <h2>2. 破局利器</h2>
  874. <h3>技术架构(军工机甲概念图)</h3>
  875. <div style="display: flex; flex-direction: column; align-items: center; margin: 30px 0;">
  876. <div style="width: 80%; max-width: 800px; position: relative;">
  877. <div style="position: relative; padding: 30px; background-color: rgba(74, 74, 74, 0.05); border-radius: 10px;">
  878. <div style="position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background-color: var(--secondary-color); color: white; padding: 5px 15px; border-radius: 20px; font-weight: bold;">
  879. 铁卫哨兵技术架构
  880. </div>
  881. <div style="display: flex; flex-direction: column; align-items: center; gap: 30px;">
  882. <div style="width: 100%; display: flex; justify-content: center; gap: 20px;">
  883. <div class="tech-card" style="flex: 1; text-align: center;">
  884. <h4>感知层</h4>
  885. <p>振动/温度/液压传感器<br>装甲接缝监测点</p>
  886. </div>
  887. <div style="width: 50px; height: 50px; background-color: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem;">
  888. <i class="fas fa-arrow-down"></i>
  889. </div>
  890. <div class="tech-card" style="flex: 1; text-align: center;">
  891. <h4>边缘层</h4>
  892. <p>微型哨兵机甲<br>就地决策系统<br>头盔AR界面</p>
  893. </div>
  894. </div>
  895. <div style="width: 50px; height: 50px; background-color: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem;">
  896. <i class="fas fa-arrow-down"></i>
  897. </div>
  898. <div style="width: 100%; display: flex; justify-content: center; gap: 20px;">
  899. <div class="tech-card" style="flex: 1; text-align: center;">
  900. <h4>云端层</h4>
  901. <p>指挥中心<br>数字孪生系统<br>全息战场沙盘</p>
  902. </div>
  903. <div style="width: 50px; height: 50px; background-color: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem;">
  904. <i class="fas fa-arrow-right"></i>
  905. </div>
  906. <div class="tech-card" style="flex: 1; text-align: center;">
  907. <h4>应用层</h4>
  908. <p>故障预警<br>维护决策<br>产能优化</p>
  909. </div>
  910. </div>
  911. </div>
  912. </div>
  913. </div>
  914. <div style="margin-top: 40px; background-color: rgba(13, 25, 163, 0.1); padding: 20px; border-radius: 10px; width: 80%; max-width: 800px;">
  915. <h4 style="color: var(--cyber-blue); text-align: center; margin-bottom: 20px;">核心技术指标</h4>
  916. <div class="grid-container">
  917. <div class="grid-item">
  918. <div class="data-pair">
  919. <span class="data-label">数据吞吐量</span>
  920. <span class="data-value highlight">10万点/秒</span>
  921. </div>
  922. </div>
  923. <div class="grid-item">
  924. <div class="data-pair">
  925. <span class="data-label">数据可靠性</span>
  926. <span class="data-value highlight">99.99%零丢失</span>
  927. </div>
  928. </div>
  929. <div class="grid-item">
  930. <div class="data-pair">
  931. <span class="data-label">故障预测准确率</span>
  932. <span class="data-value highlight">94%+</span>
  933. </div>
  934. </div>
  935. <div class="grid-item">
  936. <div class="data-pair">
  937. <span class="data-label">系统可用性</span>
  938. <span class="data-value highlight">99.98%</span>
  939. </div>
  940. </div>
  941. </div>
  942. </div>
  943. </div>
  944. </div>
  945. </section>
  946. <!-- 核心技术 - AI预测引擎 -->
  947. <section class="template-page" data-background-transition="slide">
  948. <div class="content-box">
  949. <h3>AI预测引擎(雷达图作战演示)</h3>
  950. <div class="grid-container">
  951. <div class="grid-item">
  952. <h4>动态阈值算法</h4>
  953. <p style="background-color: rgba(74, 74, 74, 0.05); padding: 15px; border-radius: 8px;">
  954. <code style="font-family: monospace; color: var(--secondary-color);">阈值 = μ(历史) ± k×σ</code>
  955. </p>
  956. <p>基于历史数据均值(μ)与标准差(σ)动态计算阈值,k值根据设备健康状态实时调参,解决传统静态阈值误报率高的问题。</p>
  957. <p style="margin-top: 20px; font-weight: bold; color: var(--accent-color);">优势:</p>
  958. <ul style="padding-left: 20px; margin-top: 10px;">
  959. <li>自适应设备老化过程</li>
  960. <li>智能过滤环境干扰</li>
  961. <li>减少90%以上误报警</li>
  962. </ul>
  963. </div>
  964. <div class="grid-item">
  965. <h4>贝叶斯网络诊断</h4>
  966. <div style="background-color: white; border: 1px solid #eee; padding: 20px; border-radius: 8px; height: 100%; display: flex; flex-direction: column; justify-content: space-between;">
  967. <div style="margin-bottom: 20px;">
  968. <p style="font-weight: bold; color: var(--primary-color); margin-bottom: 10px;">故障推理示例</p>
  969. <div style="display: flex; align-items: center; gap: 10px; margin: 10px 0;">
  970. <div style="width: 40px; height: 40px; background-color: var(--accent-color); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
  971. <i class="fas fa-tachometer-alt"></i>
  972. </div>
  973. <span>液压压力↑</span>
  974. </div>
  975. <div style="display: flex; align-items: center; gap: 10px; margin: 10px 0;">
  976. <div style="width: 40px; height: 40px; background-color: var(--accent-color); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
  977. <i class="fas fa-thermometer-quarter"></i>
  978. </div>
  979. <span>油温↑</span>
  980. </div>
  981. <div style="display: flex; align-items: center; gap: 10px; margin: 10px 0; margin-left: 50px;">
  982. <div style="width: 20px; height: 20px; background-color: var(--primary-color); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem;">
  983. <i class="fas fa-plus"></i>
  984. </div>
  985. </div>
  986. <div style="display: flex; align-items: center; gap: 10px; margin: 10px 0;">
  987. <div style="width: 40px; height: 40px; background-color: var(--secondary-color); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
  988. <i class="fas fa-wind"></i>
  989. </div>
  990. <span>振动阈值↓20%</span>
  991. </div>
  992. </div>
  993. <div style="background-color: rgba(255, 46, 46, 0.1); padding: 15px; border-radius: 8px;">
  994. <p style="font-weight: bold; color: var(--secondary-color); margin-bottom: 5px;">预测结果:</p>
  995. <p>液压系统泄漏概率78%,建议24小时内安排检修</p>
  996. </div>
  997. </div>
  998. </div>
  999. </div>
  1000. </div>
  1001. </section>
  1002. <!-- 核心技术 - 三维作战看板 -->
  1003. <section class="template-page" data-background-transition="slide">
  1004. <div class="content-box">
  1005. <h3>三维作战看板</h3>
  1006. <p style="text-align: center; margin: 30px 0; font-size: 1.2rem;">铁卫哨兵指挥中心交互原型</p>
  1007. <div style="display: flex; justify-content: center; margin: 30px 0;">
  1008. <div style="width: 90%; max-width: 1200px; height: 500px; background-color: #121212; border-radius: 10px; overflow: hidden; position: relative;">
  1009. <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:
  1010. linear-gradient(to right, rgba(74, 74, 74, 0.3) 0%, rgba(74, 74, 74, 0.1) 100%),
  1011. url(&#39;https://picsum.photos/id/117/1200/500&#39;) center/cover no-repeat;">
  1012. </div>
  1013. <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 20px; display: flex; gap: 20px;">
  1014. <div style="flex: 1; background-color: rgba(0, 0, 0, 0.6); border-radius: 8px; padding: 15px; display: flex; flex-direction: column;">
  1015. <h4 style="color: white; border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 10px; margin-top: 0;">设备健康矩阵</h4>
  1016. <div style="flex: 1; overflow-y: auto; padding: 10px 0;">
  1017. <div style="display: flex; align-items: center; gap: 10px; padding: 10px; background-color: rgba(255, 255, 255, 0.1); border-radius: 5px; margin-bottom: 10px;">
  1018. <div style="width: 40px; height: 40px; background-color: #4CAF50; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white;">
  1019. <i class="fas fa-check"></i>
  1020. </div>
  1021. <div>
  1022. <p style="color: white; margin: 0;">冲压机床 #101</p>
  1023. <p style="color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; margin: 0;">健康状态: 良好</p>
  1024. </div>
  1025. </div>
  1026. <div style="display: flex; align-items: center; gap: 10px; padding: 10px; background-color: rgba(255, 255, 255, 0.1); border-radius: 5px; margin-bottom: 10px;">
  1027. <div style="width: 40px; height: 40px; background-color: #FFC107; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white;">
  1028. <i class="fas fa-exclamation-triangle"></i>
  1029. </div>
  1030. <div>
  1031. <p style="color: white; margin: 0;">注塑机 #203</p>
  1032. <p style="color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; margin: 0;">健康状态: 预警</p>
  1033. </div>
  1034. </div>
  1035. <div style="display: flex; align-items: center; gap: 10px; padding: 10px; background-color: rgba(255, 255, 255, 0.1); border-radius: 5px; margin-bottom: 10px;">
  1036. <div style="width: 40px; height: 40px; background-color: #F44336; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white;">
  1037. <i class="fas fa-times"></i>
  1038. </div>
  1039. <div>
  1040. <p style="color: white; margin: 0;">切割机 #305</p>
  1041. <p style="color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; margin: 0;">健康状态: 故障</p>
  1042. </div>
  1043. </div>
  1044. </div>
  1045. </div>
  1046. <div style="flex: 2; background-color: rgba(0, 0, 0, 0.6); border-radius: 8px; padding: 15px; display: flex; flex-direction: column;">
  1047. <h4 style="color: white; border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 10px; margin-top: 0;">实时频谱作战地图</h4>
  1048. <div style="flex: 1; background-color: rgba(13, 25, 163, 0.3); border-radius: 5px; position: relative; overflow: hidden;">
  1049. <canvas id="spectrumChart" style="width: 100%; height: 100%;"></canvas>
  1050. </div>
  1051. </div>
  1052. <div style="flex: 1; background-color: rgba(0, 0, 0, 0.6); border-radius: 8px; padding: 15px; display: flex; flex-direction: column;">
  1053. <h4 style="color: white; border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 10px; margin-top: 0;">应急武器库</h4>
  1054. <div style="flex: 1; overflow-y: auto; padding: 10px 0;">
  1055. <div style="background-color: rgba(255, 255, 255, 0.1); border-radius: 5px; padding: 15px; margin-bottom: 15px;">
  1056. <h5 style="color: white; margin-top: 0; margin-bottom: 10px;">维护工单</h5>
  1057. <p style="color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; margin-bottom: 5px;">切割机 #305 振动异常</p>
  1058. <p style="color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; margin: 0;">优先级: 高 | 截止时间: 今天18:00</p>
  1059. </div>
  1060. <div style="background-color: rgba(255, 255, 255, 0.1); border-radius: 5px; padding: 15px; margin-bottom: 15px;">
  1061. <h5 style="color: white; margin-top: 0; margin-bottom: 10px;">AR维修指南</h5>
  1062. <p style="color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; margin-bottom: 5px;">液压系统泄漏维修流程</p>
  1063. <p style="color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; margin: 0;">查看3D动画演示</p>
  1064. </div>
  1065. <div style="background-color: rgba(255, 255, 255, 0.1); border-radius: 5px; padding: 15px;">
  1066. <h5 style="color: white; margin-top: 0; margin-bottom: 10px;">备件库存</h5>
  1067. <div style="display: flex; justify-content: space-between; align-items: center; margin: 5px 0;">
  1068. <p style="color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; margin: 0;">轴承组件 #A123</p>
  1069. <p style="color: white; font-weight: bold; margin: 0;">12 件</p>
  1070. </div>
  1071. <div style="display: flex; justify-content: space-between; align-items: center; margin: 5px 0;">
  1072. <p style="color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; margin: 0;">密封圈 #B456</p>
  1073. <p style="color: white; font-weight: bold; margin: 0;">35 件</p>
  1074. </div>
  1075. <div style="display: flex; justify-content: space-between; align-items: center; margin: 5px 0;">
  1076. <p style="color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; margin: 0;">传感器 #C789</p>
  1077. <p style="color: white; font-weight: bold; margin: 0;">8 件</p>
  1078. </div>
  1079. </div>
  1080. </div>
  1081. </div>
  1082. </div>
  1083. </div>
  1084. </div>
  1085. </div>
  1086. </section>
  1087. <!-- 核心技术 - 工业美学设计 -->
  1088. <section class="template-page" data-background-transition="slide">
  1089. <div class="content-box">
  1090. <h3>工业美学设计</h3>
  1091. <div class="grid-container">
  1092. <div class="grid-item">
  1093. <h4>设计语言</h4>
  1094. <div style="margin: 20px 0;">
  1095. <h5 style="color: var(--primary-color); margin-bottom: 10px;">色彩系统</h5>
  1096. <div style="display: flex; gap: 10px;">
  1097. <div style="width: 60px; height: 60px; background-color: #4A4A4A; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.8rem;">
  1098. 装甲灰<br>#4A4A4A
  1099. </div>
  1100. <div style="width: 60px; height: 60px; background-color: #FF2E2E; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.8rem;">
  1101. 雷达红<br>#FF2E2E
  1102. </div>
  1103. <div style="width: 60px; height: 60px; background-color: #FF7D00; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.8rem;">
  1104. 警示橙<br>#FF7D00
  1105. </div>
  1106. <div style="width: 60px; height: 60px; background-color: #0D19A3; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.8rem;">
  1107. 量子蓝<br>#0D19A3
  1108. </div>
  1109. </div>
  1110. </div>
  1111. <div>
  1112. <h5 style="color: var(--primary-color); margin-bottom: 10px;">控件设计</h5>
  1113. <ul style="padding-left: 20px; margin-top: 10px;">
  1114. <li><strong>铆钉式按钮</strong>:模拟工业设备铆钉结构,金属质感+红色警示</li>
  1115. <li><strong>防爆舱仪表盘</strong>:圆形刻度盘+指针式显示,装甲灰边框</li>
  1116. <li><strong>军用级警示灯</strong>:旋转式红灯+蜂鸣器图标,故障时脉冲闪烁</li>
  1117. <li><strong>金属拉丝面板</strong>:背景采用细腻的金属拉丝纹理,增强工业质感</li>
  1118. </ul>
  1119. </div>
  1120. </div>
  1121. <div class="grid-item">
  1122. <h4>界面设计案例</h4>
  1123. <div style="background-color: #121212; border-radius: 8px; overflow: hidden; margin-bottom: 20px;">
  1124. <div style="height: 300px; background: linear-gradient(to right, #4A4A4A, #333333); display: flex; align-items: center; justify-content: center;">
  1125. <img src="./铁卫哨兵——工业智能检测系统1_files/116-600x300.jpg" alt="工业界面设计" style="max-width: 100%; height: auto;" data-extentions-extra-ocr-id="ea6f6dcc9b597a237f086929c89310be">
  1126. </div>
  1127. <div style="padding: 15px; background-color: rgba(255, 255, 255, 0.05);">
  1128. <p style="color: white; margin: 0;">汽车缸体加工机床监控界面</p>
  1129. <p style="color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; margin: 5px 0;">金属拉丝面板+铆钉式控件+实时数据仪表盘</p>
  1130. </div>
  1131. </div>
  1132. <div style="background-color: #121212; border-radius: 8px; overflow: hidden;">
  1133. <div style="height: 300px; background: linear-gradient(to right, #4A4A4A, #333333); display: flex; align-items: center; justify-content: center;">
  1134. <img src="./铁卫哨兵——工业智能检测系统1_files/115-600x300.jpg" alt="工业界面设计" style="max-width: 100%; height: auto;" data-extentions-extra-ocr-id="4dac952e3abb48920aea8bbeb0ee9909">
  1135. </div>
  1136. <div style="padding: 15px; background-color: rgba(255, 255, 255, 0.05);">
  1137. <p style="color: white; margin: 0;">生产线健康状态总览界面</p>
  1138. <p style="color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; margin: 5px 0;">防爆舱仪表盘+军用级警示灯+数据可视化图表</p>
  1139. </div>
  1140. </div>
  1141. </div>
  1142. </div>
  1143. </div>
  1144. </section>
  1145. <!-- 场景实战 - 液压系统歼灭战 -->
  1146. <section class="template-page" data-background-transition="slide">
  1147. <div class="content-box">
  1148. <h2>3. 场景实战</h2>
  1149. <h3>液压系统歼灭战</h3>
  1150. <div style="margin: 30px 0;">
  1151. <div class="timeline">
  1152. <div class="timeline-item">
  1153. <div class="timeline-content">
  1154. <h4>压力突变检测</h4>
  1155. <p>铁卫哨兵系统检测到液压系统压力在200ms内骤降35%,触发一级预警</p>
  1156. </div>
  1157. </div>
  1158. <div class="timeline-item">
  1159. <div class="timeline-content">
  1160. <h4>油温超限确认</h4>
  1161. <p>同步检测到液压油温度升高12℃,超过正常工作范围,确认存在异常</p>
  1162. </div>
  1163. </div>
  1164. <div class="timeline-item">
  1165. <div class="timeline-content">
  1166. <h4>自动降压保护</h4>
  1167. <p>系统自动启动降压保护程序,将系统压力降至安全阈值,防止故障扩大</p>
  1168. </div>
  1169. </div>
  1170. <div class="timeline-item">
  1171. <div class="timeline-content">
  1172. <h4>维修工单生成</h4>
  1173. <p>基于贝叶斯网络诊断,推测为液压阀泄漏,自动生成维修工单并推送</p>
  1174. </div>
  1175. </div>
  1176. <div class="timeline-item">
  1177. <div class="timeline-content">
  1178. <h4>维修验收完成</h4>
  1179. <p>维修团队更换液压阀后,系统检测各项指标恢复正常,验收通过</p>
  1180. </div>
  1181. </div>
  1182. </div>
  1183. </div>
  1184. <div style="display: flex; justify-content: center; margin: 40px 0;">
  1185. <div style="width: 80%; max-width: 800px; background-color: rgba(13, 25, 163, 0.1); border-radius: 10px; padding: 30px; text-align: center;">
  1186. <h3 style="color: var(--cyber-blue); margin-bottom: 20px;">战役成果</h3>
  1187. <p style="font-size: 1.5rem; color: var(--primary-color); margin: 10px 0;">避免 $120k 液压缸爆裂事故</p>
  1188. <div style="display: flex; justify-content: center; gap: 40px; margin: 30px 0;">
  1189. <div>
  1190. <p style="font-size: 2rem; color: var(--accent-color); margin: 0;">98%</p>
  1191. <p style="color: var(--primary-color); margin: 5px 0;">故障精准定位率</p>
  1192. </div>
  1193. <div>
  1194. <p style="font-size: 2rem; color: var(--accent-color); margin: 0;">15分钟</p>
  1195. <p style="color: var(--primary-color); margin: 5px 0;">从预警到维修完成</p>
  1196. </div>
  1197. <div>
  1198. <p style="font-size: 2rem; color: var(--accent-color); margin: 0;">0</p>
  1199. <p style="color: var(--primary-color); margin: 5px 0;">生产停机损失</p>
  1200. </div>
  1201. </div>
  1202. </div>
  1203. </div>
  1204. </div>
  1205. </section>
  1206. <!-- 场景实战 - 主轴保卫战 -->
  1207. <section class="template-page" data-background-transition="slide">
  1208. <div class="content-box">
  1209. <h3>主轴保卫战</h3>
  1210. <div class="grid-container">
  1211. <div class="grid-item">
  1212. <h4>预测模型</h4>
  1213. <p style="background-color: rgba(74, 74, 74, 0.05); padding: 15px; border-radius: 8px; font-family: monospace;">
  1214. 退化指数DI = (高频能量/总能量) × 温变速率
  1215. </p>
  1216. <p>通过分析主轴振动信号的高频能量占比与温度变化速率,构建设备退化指数模型,实现主轴剩余寿命预测。</p>
  1217. <div style="margin-top: 30px;">
  1218. <h5 style="color: var(--primary-color); margin-bottom: 15px;">传统维护 vs 预测性维护</h5>
  1219. <div class="comparison-table" style="font-size: 0.9rem;">
  1220. 指标
  1221. 传统维护
  1222. 铁卫哨兵
  1223. 维护策略
  1224. 定时更换
  1225. 基于状态
  1226. 更换周期
  1227. 40天
  1228. 动态预测
  1229. 备件库存成本
  1230. 降低40%
  1231. 非计划停机
  1232. 常见
  1233. 几乎为零
  1234. 维护成本
  1235. $25,000/次
  1236. $12,000/次
  1237. </div>
  1238. </div>
  1239. </div>
  1240. <div class="grid-item">
  1241. <h4>预测可视化</h4>
  1242. <div style="display: flex; justify-content: center; margin: 30px 0;">
  1243. <div style="width: 300px; height: 300px; position: relative;">
  1244. <svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  1245. <circle cx="150" cy="150" r="120" fill="none" stroke="#eee" stroke-width="10"></circle>
  1246. <circle id="lifeCircle" cx="150" cy="150" r="120" fill="none" stroke="#FF2E2E" stroke-width="10" stroke-dasharray="753.98" stroke-dashoffset="0"></circle>
  1247. <text x="150" y="150" font-size="24" text-anchor="middle" dominant-baseline="middle" fill="var(--primary-color)">0天</text>
  1248. <text x="150" y="180" font-size="14" text-anchor="middle" dominant-baseline="middle" fill="var(--primary-color)">剩余寿命</text>
  1249. <!-- Code injected by live-server -->
  1250. <script>
  1251. // &lt;-- For SVG support
  1252. if ('WebSocket' in window) {
  1253. (function () {
  1254. function refreshCSS() {
  1255. var sheets = [].slice.call(document.getElementsByTagName("link"));
  1256. var head = document.getElementsByTagName("head")[0];
  1257. for (var i = 0; i &lt; sheets.length; ++i) {
  1258. var elem = sheets[i];
  1259. var parent = elem.parentElement || head;
  1260. parent.removeChild(elem);
  1261. var rel = elem.rel;
  1262. if (elem.href &amp;&amp; typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
  1263. var url = elem.href.replace(/(&amp;|\?)_cacheOverride=\d+/, '');
  1264. elem.href = url + (url.indexOf('?') &gt;= 0 ? '&amp;' : '?') + '_cacheOverride=' + (new Date().valueOf());
  1265. }
  1266. parent.appendChild(elem);
  1267. }
  1268. }
  1269. var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
  1270. var address = protocol + window.location.host + window.location.pathname + '/ws';
  1271. var socket = new WebSocket(address);
  1272. socket.onmessage = function (msg) {
  1273. if (msg.data == 'reload') window.location.reload();
  1274. else if (msg.data == 'refreshcss') refreshCSS();
  1275. };
  1276. if (sessionStorage &amp;&amp; !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
  1277. console.log('Live reload enabled.');
  1278. sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
  1279. }
  1280. })();
  1281. }
  1282. else {
  1283. console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
  1284. }
  1285. //
  1286. </script>
  1287. </svg>
  1288. </div>
  1289. </div>
  1290. <p style="text-align: center; color: var(--primary-color); margin-top: 20px;">主轴寿命沙漏(剩余寿命从 <span class="highlight">40天→精准预测</span>)</p>
  1291. <div style="margin-top: 30px; background-color: rgba(255, 46, 46, 0.1); border-radius: 8px; padding: 20px;">
  1292. <h4 style="color: var(--secondary-color); margin-top: 0; text-align: center;">战役成果</h4>
  1293. <p style="text-align: center; margin: 10px 0;">成功将主轴更换周期从固定40天优化为动态预测,</p>
  1294. <p style="text-align: center; margin: 10px 0;">平均延长主轴使用寿命22%,年节省维护成本$85,000</p>
  1295. </div>
  1296. </div>
  1297. </div>
  1298. </div>
  1299. </section>
  1300. <!-- 场景实战 - 多战线协同作战 -->
  1301. <section class="template-page" data-background-transition="slide">
  1302. <div class="content-box">
  1303. <h3>多战线协同作战</h3>
  1304. <p style="text-align: center; margin: 30px 0; font-size: 1.2rem;">铁卫哨兵指挥中心作战流程</p>
  1305. <div style="display: flex; flex-direction: column; align-items: center; margin: 30px 0;">
  1306. <div style="width: 80%; max-width: 800px; position: relative;">
  1307. <div style="position: relative; padding: 30px; background-color: rgba(74, 74, 74, 0.05); border-radius: 10px;">
  1308. <div style="position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background-color: var(--secondary-color); color: white; padding: 5px 15px; border-radius: 20px; font-weight: bold;">
  1309. 多设备协同监测与联动响应
  1310. </div>
  1311. <div style="display: flex; flex-direction: column; align-items: center; gap: 30px;">
  1312. <div style="width: 100%; display: flex; justify-content: space-around; gap: 20px;">
  1313. <div class="weapon-card">
  1314. <div class="weapon-icon" style="background-color: var(--accent-color);">
  1315. <i class="fas fa-bell"></i>
  1316. </div>
  1317. <div>
  1318. <h4>实时告警</h4>
  1319. <p>多设备异常同步检测,优先级自动排序</p>
  1320. </div>
  1321. </div>
  1322. <div class="weapon-icon" style="width: 60px; height: 60px; background-color: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem;">
  1323. <i class="fas fa-arrow-right"></i>
  1324. </div>
  1325. </div>
  1326. <div class="weapon-icon" style="width: 80px; height: 80px; background-color: var(--cyber-blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem; margin: -40px 0; z-index: 1;">
  1327. <i class="fas fa-brain"></i>
  1328. </div>
  1329. <div style="width: 100%; display: flex; justify-content: space-around; gap: 20px;">
  1330. <div class="weapon-icon" style="width: 60px; height: 60px; background-color: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem;">
  1331. <i class="fas fa-arrow-right"></i>
  1332. </div>
  1333. <div class="weapon-card">
  1334. <div class="weapon-icon" style="background-color: var(--secondary-color);">
  1335. <i class="fas fa-glasses"></i>
  1336. </div>
  1337. <div>
  1338. <h4>AR透视诊断</h4>
  1339. <p>三维可视化故障定位,维修步骤引导</p>
  1340. </div>
  1341. </div>
  1342. </div>
  1343. <div style="width: 100%; display: flex; justify-content: space-around; gap: 20px;">
  1344. <div class="weapon-card">
  1345. <div class="weapon-icon" style="background-color: var(--accent-color);">
  1346. <i class="fas fa-tasks"></i>
  1347. </div>
  1348. <div>
  1349. <h4>工单派发</h4>
  1350. <p>自动匹配维修团队,备件库存检查</p>
  1351. </div>
  1352. </div>
  1353. <div class="weapon-icon" style="width: 60px; height: 60px; background-color: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem;">
  1354. <i class="fas fa-arrow-right"></i>
  1355. </div>
  1356. </div>
  1357. <div style="width: 100%; display: flex; justify-content: space-around; gap: 20px;">
  1358. <div class="weapon-icon" style="width: 60px; height: 60px; background-color: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.5rem;">
  1359. </div></div></div></div></div></div></div></section></div></div><div data-v-5122f198="" class="wps_ai_link" style="display: none;"><svg data-v-5122f198="" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path data-v-5122f198="" d="M0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V14C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14V2Z" fill="#1D70F5"></path><path data-v-5122f198="" d="M0 14H16C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14Z" fill="#0059E8"></path><path data-v-5122f198="" d="M8 14H16C16 15.1046 15.1046 16 14 16H8V14Z" fill="#3C87FF"></path><path data-v-5122f198="" d="M3.34164 3H4.87711L5.88781 7.62035L7.21221 3.5H8.7878L10.1122 7.62035L11.1229 3H12.6584L10.9084 11H9.62293L8 5.95091L6.37708 11H5.09164L3.34164 3Z" fill="white"></path></svg><!----><!----><span data-v-5122f198="" class="wps_ai_link_title">在线打开</span></div><wps-floating-ball id="wps-floating-ball" style="z-index: 2147483647;"><template shadowrootmode="open"><style>*{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Noto Sans","Noto Sans CJK SC","Microsoft YaHei","微软雅黑",sans-serif;font-size:14px;user-select:none}div,input,li,ol,p,span,text,ul{margin:0;padding:0;border:0;color:rgba(13,13,13,.9)}img{margin:0;padding:0}li,ol,ul{list-style:none}input,select,text,textarea{outline:0}a,a:active,a:hover,a:link,a:visited{color:rgba(13,13,13,.9);text-decoration:none;outline:0}a:hover{color:#3d4757;text-decoration:none}a:hidefocus{outline:0}a:focus{outline:0}::-webkit-scrollbar{width:6px;height:4px}::-webkit-scrollbar-button{background-color:none;height:10px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#dbdbdb;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#ccd0d6}::-webkit-scrollbar-thumb:active{background:#ccd0d6}::-webkit-scrollbar-corner{background:0 0}::-webkit-scrollbar-resizer{background:0 0}@keyframes fadeinframes{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes loadSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}.wps_ai_fadein{animation:fadeinframes 150ms ease}button{background:0 0;border:0;margin:0;padding:0;cursor:pointer;text-align:left;border-radius:6px;outline:0;font-size:14px;text-shadow:none;box-shadow:none;box-sizing:border-box;display:flex;justify-content:center;align-items:center}button:hover{background:rgba(13,13,13,.06)}button:active{background:rgba(13,13,13,.1)}.text-tooltip-container{position:relative;display:inline-block}.text-tooltip-container .tooltip{position:absolute;left:50%;transform:translateX(-50%);z-index:1}.text-tooltip-container .tooltip .tooltip-content{color:#fff;padding:6px 12px;white-space:nowrap;border-radius:8px;background:#575757}.text-tooltip-container .tooltip .tooltip-arrow{width:0;height:0;margin:0 auto}.text-tooltip-container .tooltip-top{top:-40px}.text-tooltip-container .tooltip-top .tooltip-arrow-top{border-left:10px solid transparent;border-right:10px solid transparent;border-top:5px solid #575757}.text-tooltip-container .tooltip-bottom{top:calc(100% + 8px)}.text-tooltip-container .tooltip-bottom .tooltip-arrow-bottom{border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:5px solid #575757}*{box-sizing:border-box}.floating-ball{position:fixed;border-radius:27px;border:1px solid var(---kd-color-line-light,rgba(13,13,13,.06));background:var(---kd-color-background-top,#fff);box-shadow:0 3.6px 9px 0 rgba(13,13,13,.08);z-index:2147483647}.floating-ball:hover{opacity:1;transform:translateX(0);cursor:pointer}.floating-ball.flipping{transform:scaleX(-1)}.floating-ball.flipping .tooltip-top>.tooltip-content{transform:scaleX(-1)}.floating-ball.flipping .menu-item-content>img{transform:scaleX(-1)}.floating-ball.flipping #wps_disablefeature_menu{transform:scaleX(-1)}.floating-ball-logo{display:flex;width:36px;height:36px;padding:9px;justify-content:center;align-items:center;gap:9px;flex-shrink:0;position:relative;z-index:2}.floating-ball-close{position:absolute;right:-4px;top:25px;width:16px;height:16px;display:flex;z-index:3}.menu-container{position:absolute;top:calc(-50% - 36px)}.menu-container.active{height:176px;width:88px;left:-68px;top:-68px}.menu-fade-enter-active,.menu-fade-leave-active{transition:opacity .2s,transform .2s}.menu-fade-enter,.menu-fade-leave-to{opacity:0;transform:translateX(34px) scale(0)}.menu-items{position:relative;width:100%;height:100%}.menu-item{display:flex;justify-content:center;align-items:center;position:absolute;z-index:99}.menu-item>img{display:none;position:absolute}.menu-item:hover>img{display:block}.tooltip-top{display:none;align-items:center;position:absolute;top:-8px;left:-64px;background:#333;border-radius:8px;padding:6px 12px;white-space:nowrap;z-index:100}.tooltip-top.isBeta{background:#333;left:-106px}.tooltip-top::after{content:"";position:absolute;top:11px;left:100%;border-width:5px;border-style:solid;border-color:transparent transparent transparent #333;display:flex;gap:4px}.tooltip-content>span{color:#fff}.menu-item:hover .tooltip-top{display:flex}.menu-bg{left:0;position:absolute;z-index:0}.menu-item-ring0{top:4px;left:32px;width:53px;height:48px}.menu-item-ring1{top:31px;left:5px;width:47px;height:55px}.menu-item-ring1 .menu-item-content{top:24px;left:16px}.menu-item-ring2{top:90px;left:4px;width:48px;height:54px}.menu-item-ring2 .menu-item-content{top:15px;left:16px}.menu-item-ring3{top:123px;left:32px;width:52px;height:48px}.menu-item-content{position:absolute;z-index:99;top:14px;left:23px}span.betaTip{background-color:#edf4ff;color:#1f69e0;border-radius:3px;padding:0 4px;font-size:10px;font-weight:600;margin-left:4px;height:14px}.tooltip-content{display:flex;align-items:center;gap:4px}.menu{position:absolute;width:182px;top:48px;right:0;box-sizing:border-box;padding:8px;border-radius:8px;border:1px solid rgba(13,13,13,.12);background:#fff;box-shadow:0 12px 32px 0 rgba(13,13,13,.08);z-index:999}.menu_item{display:flex;align-items:center;justify-content:left;align-self:stretch;box-sizing:border-box;margin:4px 0;height:32px;width:100%;padding:4px 8px;color:rgba(13,13,13,.9)}.menu_item:hover{border-radius:6px;background:rgba(13,13,13,.06)}.menu_item:active{border-radius:6px;background:rgba(13,13,13,.1)}.menu_last{height:1px;margin:0;padding:0;background:rgba(13,13,13,.12)}.menu_setting{color:#1f69e0}.menu_contact{position:relative}.menu_contact .menu_img{position:absolute;top:0;right:-138px;padding:12px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;border-radius:4px;border:1px solid rgba(13,13,13,.12);background:#fff;box-shadow:0 12px 32px 0 rgba(13,13,13,.08);color:rgba(13,13,13,.46);font-size:12px}.menu_contact .menu_img img{width:100px;height:100px}.menu_contact .menu_img .feedback_txt{color:rgba(13,13,13,.9);font-size:12px}.menu_contact .menu_img_onleft{left:-138px;right:unset}</style><div data-v-42da9b4d="" class="floating-ball" style="left: 1788px; top: 237px; transition: 0.2s;"><div data-v-42da9b4d="" class="floating-ball-logo"><img data-v-42da9b4d="" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjU5MzcgNS4wNDg3Nkw3Ljc1NDU3IDE2LjUyNjhDNy41MjQ3NCAxNi45Nzg1IDcuMDY3NjIgMTcuMjM4MyA2LjU5MzggMTcuMjM3NkM2LjExOTk1IDE3LjIzODMgNS42NjI4MyAxNi45Nzg2IDUuNDMyOTkgMTYuNTI2OEwwLjE0MTg5NiA2LjEyNjA1QzAuMDExMTMzMiA1Ljg2OTAxIC0wLjAyNjE4NzUgNS41ODg4OSAwLjAxNzMzNDIgNS4zMjQ1M0MwLjA4ODY1MzIgNC42NzMzNyAwLjYzOTY2MSA0LjE2Njc1IDEuMzA4ODEgNC4xNjY3NUg4LjA4MTFDOC42MjE3NSA0LjE2Njc1IDkuMDg1MjcgNC40OTc0NyA5LjI4MSA0Ljk2Nzk1TDkuNTU3MTUgNS41MTA4N0w4LjA5ODI0IDguMzc2MTlMNy4yODA4OCA2Ljc2OTQ5SDMuMzg1NzlMNi41OTM3NiAxMy4wNzU0TDEwLjcwOTkgNC45ODQ0M0MxMC45NjUxIDQuNDgyNzIgMTEuNDgwMyA0LjE2Njc1IDEyLjA0MzIgNC4xNjY3NUgxNC44OTQ0QzE0LjYzODQgNC4xNzY2MSAxNC4zOTc3IDQuMjQ5NTIgMTQuMTcyMiA0LjM4NTVDMTMuOTU1NiA0LjUxNjAzIDEzLjc2ODIgNC43MjY5NSAxMy42MSA1LjAxODI2TDEzLjU5MzkgNS4wNDgzMkwxMy41OTM3IDUuMDQ4NzZaIiBmaWxsPSIjRkYxNTIyIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTUuNzg3MiA0LjE2Njc1QzE1LjUzMTMgNC4xNzY2MSAxNS4yOTA1IDQuMjQ5NTIgMTUuMDY1IDQuMzg1NUMxNC44NDg0IDQuNTE2MDMgMTQuNjYxMSA0LjcyNjk1IDE0LjUwMjggNS4wMTgyNkwxNC40ODU0IDUuMDUwODRMMTMuNjExMSA2Ljc2OTUxTDE2LjYxMyA2Ljc2OTVMMTMuNDA1MiAxMy4wNzVMMTEuOTA0MyAxMC4xMjQ2TDEwLjc2MTQgMTIuMzcxMkwxMC43NTU1IDEyLjM2OTJMMTAuNDQyNCAxMi45ODQxTDEyLjI0NTkgMTYuNTI5MkMxMi40NzI1IDE2Ljk3MzQgMTIuOTE5NyAxNy4yMzEyIDEzLjM4NTkgMTcuMjM3NUMxMy4zOTE0IDE3LjIzNzYgMTMuMzk2OSAxNy4yMzc2IDEzLjQwMjUgMTcuMjM3NkgxMy40MDgxQzEzLjQxNDYgMTcuMjM3NiAxMy40MjEyIDE3LjIzNzYgMTMuNDI3OCAxNy4yMzc1QzEzLjg5MjggMTcuMjMwMSAxNC4zMzg1IDE2Ljk3MjQgMTQuNTY0NiAxNi41MjkyTDE0LjU2NTQgMTYuNTI3OEwxOS44NTg1IDYuMTIzMDdDMTkuOTY0MiA1LjkxNTIyIDIwLjAwODcgNS42OTIzIDE5Ljk5ODYgNS40NzQ4OEwxOS45OTg2IDUuNDY1OTZDMTkuOTk4NiA0Ljc0ODQyIDE5LjQxNjkgNC4xNjY3NSAxOC42OTk1IDQuMTY2NzVIMTUuNzg3MlpNMTMuNDI0OSAxNy4yMzc0TDEzLjQyNzggMTcuMjM3NUMxMy40MjY4IDE3LjIzNzQgMTMuNDI1OCAxNy4yMzc0IDEzLjQyNDkgMTcuMjM3NFpNMTMuMzgyNyAxNy4yMzc0TDEzLjM4NTkgMTcuMjM3NUMxMy4zODQ5IDE3LjIzNzQgMTMuMzgzOCAxNy4yMzc0IDEzLjM4MjcgMTcuMjM3NFoiIGZpbGw9IiNGRjE1MjIiLz4KPC9zdmc+Cg==" alt=""></div><div data-v-42da9b4d="" class="floating-ball-close" style="display: none;"><img data-v-42da9b4d="" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iOCIgY3k9IjgiIHI9IjYuNzUiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNS4yMTQzNiA2LjI1MDA3QzQuOTI4MzkgNS45NjQxIDQuOTI4MzggNS41MDA0NSA1LjIxNDM1IDUuMjE0NDhDNS41MDAzMiA0LjkyODUxIDUuOTYzOTggNC45Mjg1MSA2LjI0OTk1IDUuMjE0NDdMNy45OTk4OCA2Ljk2NDM2TDkuNzQ5OCA1LjIxNDQ3QzEwLjAzNTggNC45Mjg1MSAxMC40OTk0IDQuOTI4NTEgMTAuNzg1NCA1LjIxNDQ4QzExLjA3MTQgNS41MDA0NSAxMS4wNzE0IDUuOTY0MSAxMC43ODU0IDYuMjUwMDdMOS4wMzU0OCA3Ljk5OTk0TDEwLjc4NTMgOS43NDk3MkMxMS4wNzEzIDEwLjAzNTcgMTEuMDcxMyAxMC40OTkzIDEwLjc4NTMgMTAuNzg1M0MxMC40OTkzIDExLjA3MTMgMTAuMDM1NyAxMS4wNzEzIDkuNzQ5NzEgMTAuNzg1M0w3Ljk5OTg4IDkuMDM1NTJMNi4yNTAwNCAxMC43ODUzQzUuOTY0MDcgMTEuMDcxMyA1LjUwMDQxIDExLjA3MTMgNS4yMTQ0NCAxMC43ODUzQzQuOTI4NDcgMTAuNDk5MyA0LjkyODQ3IDEwLjAzNTcgNS4yMTQ0NSA5Ljc0OTcyTDYuOTY0MjcgNy45OTk5NEw1LjIxNDM2IDYuMjUwMDdaIiBmaWxsPSIjNzU3NTc1Ii8+Cjwvc3ZnPgo=" alt=""></div><div data-v-42da9b4d="" class="menu-container active" style="display: none;"><svg data-v-42da9b4d="" width="88" height="176" viewBox="0 0 88 176" fill="none" xmlns="http://www.w3.org/2000/svg" class="menu-bg"><foreignobject data-v-42da9b4d="" x="-7" y="-7" width="102.001" height="190"><div data-v-42da9b4d="" xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter: blur(3.5px); clip-path: url(&quot;#bgblur_0_8118_40266_clip_path&quot;); height: 100%; width: 100%;"></div></foreignobject><path data-v-42da9b4d="" data-figma-bg-blur-radius="7" d="M88.001 40.6037C88.001 42.7765 86.2623 44.5324 84.1035 44.7798C80.1384 45.2342 76.2477 46.2391 72.5459 47.7724C67.329 49.9333 62.5886 53.1009 58.5957 57.0937C54.6028 61.0866 51.4354 65.8269 49.2744 71.0439C47.1135 76.2607 46.001 81.8523 46.001 87.499C46.001 93.1458 47.1135 98.738 49.2744 103.955C51.4354 109.172 54.6029 113.912 58.5957 117.905C62.5885 121.898 67.3291 125.066 72.5459 127.227C76.2477 128.76 80.1384 129.764 84.1035 130.218C86.2623 130.466 88.001 132.221 88.001 134.394V172.087C88.001 174.296 86.2091 176.096 84.0023 175.996C73.8117 175.532 63.7685 173.297 54.3252 169.382C43.6487 164.955 33.9469 158.467 25.7754 150.287C17.604 142.108 11.1216 132.397 6.69922 121.71C2.27682 111.023 1.20788e-05 99.5677 0 87.9999C7.50448e-06 76.4324 2.27694 64.978 6.69922 54.291C11.1216 43.6038 17.6039 33.8924 25.7754 25.7128C33.9469 17.5333 43.6486 11.0448 54.3252 6.6181C63.7685 2.70279 73.8117 0.468019 84.0023 0.00401194C86.2091 -0.0964727 88.001 1.70388 88.001 3.91302V40.6037Z" fill="#E5E5E5" fill-opacity="0.7"></path><defs data-v-42da9b4d=""><clippath data-v-42da9b4d="" id="bgblur_0_8118_40266_clip_path" transform="translate(7 7)"><path data-v-42da9b4d="" d="M88.001 40.6037C88.001 42.7765 86.2623 44.5324 84.1035 44.7798C80.1384 45.2342 76.2477 46.2391 72.5459 47.7724C67.329 49.9333 62.5886 53.1009 58.5957 57.0937C54.6028 61.0866 51.4354 65.8269 49.2744 71.0439C47.1135 76.2607 46.001 81.8523 46.001 87.499C46.001 93.1458 47.1135 98.738 49.2744 103.955C51.4354 109.172 54.6029 113.912 58.5957 117.905C62.5885 121.898 67.3291 125.066 72.5459 127.227C76.2477 128.76 80.1384 129.764 84.1035 130.218C86.2623 130.466 88.001 132.221 88.001 134.394V172.087C88.001 174.296 86.2091 176.096 84.0023 175.996C73.8117 175.532 63.7685 173.297 54.3252 169.382C43.6487 164.955 33.9469 158.467 25.7754 150.287C17.604 142.108 11.1216 132.397 6.69922 121.71C2.27682 111.023 1.20788e-05 99.5677 0 87.9999C7.50448e-06 76.4324 2.27694 64.978 6.69922 54.291C11.1216 43.6038 17.6039 33.8924 25.7754 25.7128C33.9469 17.5333 43.6486 11.0448 54.3252 6.6181C63.7685 2.70279 73.8117 0.468019 84.0023 0.00401194C86.2091 -0.0964727 88.001 1.70388 88.001 3.91302V40.6037Z"></path></clippath></defs></svg><div data-v-42da9b4d="" class="menu-items"><div data-v-42da9b4d="" class="menu-item menu-item-ring0"><img data-v-42da9b4d="" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTQiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA1NCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUzLjA2OTQgMzMuMzkwNEM1My4wNjk0IDM1LjQ3MjkgNTEuNDY2OSAzNy4xODg3IDQ5LjQxMDggMzcuNTE4OUM0MS4zNTA2IDM4LjgxMzQgMzMuOTc4OSA0Mi4xMzYgMjcuODQ2NiA0Ni45NDA2QzI2LjE1NTYgNDguMjY1NSAyMy43MTgzIDQ4LjIzMjkgMjIuMTk5MyA0Ni43MTM5TDEuNzAwNjYgMjYuMjE1MkMwLjExNjIwNSAyNC42MzA4IDAuMTM2MzA4IDIyLjA0NjIgMS44MjU5NCAyMC41NzQ0QzguNjcwMDggMTQuNjEyNiAxNi40NDU1IDkuNzkwNzcgMjQuODU0NiA2LjMwNzZDMzIuNTM5MSAzLjEyNDY0IDQwLjYzOTYgMS4xMDY2MiA0OC44ODg4IDAuMzA2MzY0QzUxLjE2MDggMC4wODU5NTk3IDUzLjA2OTQgMS45MTUgNTMuMDY5NCA0LjE5NzYyVjMzLjM5MDRaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K" alt=""><div data-v-42da9b4d="" class="menu-item-content"><img data-v-42da9b4d="" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNiAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04LjQ1NjcxIDkuMjAxNTdDOC43MTMwMSA5LjAzODU0IDkuMDUyOTQgOS4xMTQxNSA5LjIxNTk3IDkuMzcwNDVMMTAuNDk5MyAxMS4zODc5TDExLjc4MDggOS4zNzA4NEMxMS45NDM3IDkuMTE0NDUgMTIuMjgzNiA5LjAzODY2IDEyLjU0IDkuMjAxNTZDMTIuNzk2NCA5LjM2NDQ1IDEyLjg3MjIgOS43MDQzNCAxMi43MDkzIDkuOTYwNzNMMTEuMTUxMyAxMi40MTI5TDExLjcyOTggMTMuMzIyM0MxMi4wNTU3IDEyLjg2MjggMTIuNTkxOSAxMi41NjI5IDEzLjE5ODIgMTIuNTYyOUMxNC4xOTE4IDEyLjU2MjkgMTQuOTk3MiAxMy4zNjg0IDE0Ljk5NzIgMTQuMzYxOUMxNC45OTcyIDE1LjM1NTUgMTQuMTkxOCAxNi4xNjEgMTMuMTk4MiAxNi4xNjFDMTIuNDY4MSAxNi4xNjEgMTEuODM5NiAxNS43MjYgMTEuNTU3NiAxNS4xMDEyTDEwLjQ5OTggMTMuNDM4M0w5LjQyNTM2IDE1LjEyOTRDOS4xMzczNCAxNS43MzkxIDguNTE2ODMgMTYuMTYxIDcuNzk3OCAxNi4xNjFDNi44MDQyMyAxNi4xNjEgNS45OTg3OCAxNS4zNTU1IDUuOTk4NzggMTQuMzYxOUM1Ljk5ODc4IDEzLjM2ODQgNi44MDQyMyAxMi41NjI5IDcuNzk3OCAxMi41NjI5QzguNDA1MzkgMTIuNTYyOSA4Ljk0MjYzIDEyLjg2NDEgOS4yNjgzNSAxMy4zMjUzTDkuODQ3ODMgMTIuNDEzM0w4LjI4NzgzIDkuOTYwODNDOC4xMjQ4IDkuNzA0NTMgOC4yMDA0MSA5LjM2NDYgOC40NTY3MSA5LjIwMTU3Wk04LjQ1MDYxIDE0LjYxMjRDOC40ODA0NiAxNC41MzQ3IDguNDk2ODMgMTQuNDUwMiA4LjQ5NjgzIDE0LjM2MTlDOC40OTY4MyAxMy45NzU5IDguMTgzODYgMTMuNjYyOSA3Ljc5NzggMTMuNjYyOUM3LjQxMTc0IDEzLjY2MjkgNy4wOTg3OCAxMy45NzU5IDcuMDk4NzggMTQuMzYxOUM3LjA5ODc4IDE0Ljc0OCA3LjQxMTc0IDE1LjA2MSA3Ljc5NzggMTUuMDYxQzcuOTk2MTQgMTUuMDYxIDguMTc1MTggMTQuOTc4NCA4LjMwMjQxIDE0Ljg0NTdMOC40NTA2MSAxNC42MTI0Wk0xMi43MDgxIDE0Ljg2MDRDMTIuODM0MiAxNC45ODQ0IDEzLjAwNzMgMTUuMDYxIDEzLjE5ODIgMTUuMDYxQzEzLjU4NDMgMTUuMDYxIDEzLjg5NzIgMTQuNzQ4IDEzLjg5NzIgMTQuMzYxOUMxMy44OTcyIDEzLjk3NTkgMTMuNTg0MyAxMy42NjI5IDEzLjE5ODIgMTMuNjYyOUMxMi44MTIxIDEzLjY2MjkgMTIuNDk5MiAxMy45NzU5IDEyLjQ5OTIgMTQuMzYxOUMxMi40OTkyIDE0LjQ0MzIgMTIuNTEzIDE0LjUyMTMgMTIuNTM4NiAxNC41OTM5TDEyLjcwODEgMTQuODYwNFoiIGZpbGw9IiMzMzMzMzMiLz4KPHBhdGggZD0iTTQuNDk5MDIgMi42NjI5NkgzLjI0OTAyQzIuNDIwNiAyLjY2Mjk2IDEuNzQ5MDIgMy4zMzQ1NCAxLjc0OTAyIDQuMTYyOTZWNS40MTI5Nk01Ljk5OTAyIDIuNjYyOTZIOS45OTkwMk0xMS40OTkgMi42NjI5NkgxMi43NDlDMTMuNTc3NSAyLjY2Mjk2IDE0LjI0OSAzLjMzNDU0IDE0LjI0OSA0LjE2Mjk2VjcuNDEyOTZNMS43NDkwMiAxMC45MTNWNi45Mjk0Nk0xLjc0OTAyIDEyLjQxM1YxMy42NjNDMS43NDkwMiAxNC40OTE0IDIuNDIwNiAxNS4xNjMgMy4yNDkwMiAxNS4xNjNINC40OTkwMiIgc3Ryb2tlPSIjMzMzMzMzIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K" alt=""><div data-v-42da9b4d="" class="tooltip-top isBeta"><div data-v-42da9b4d="" class="tooltip-content"><span data-v-42da9b4d="">长截图</span><span data-v-42da9b4d="" class="betaTip" style="display: none;">Beta</span><svg data-v-42da9b4d="" width="30" height="14" viewBox="0 0 30 14" fill="none" xmlns="http://www.w3.org/2000/svg"><rect data-v-42da9b4d="" width="30" height="14" rx="3" fill="#FEF1F1"></rect><path data-v-42da9b4d="" d="M4.91 11V3.59H6.42L8.57 7.54L9.32 9.14H9.37C9.29 8.37 9.17 7.39 9.17 6.55V3.59H10.57V11H9.06L6.93 7.04L6.18 5.45H6.13C6.19 6.25 6.32 7.18 6.32 8.03V11H4.91ZM14.7202 11.14C13.1502 11.14 11.9302 10.05 11.9302 8.2C11.9302 6.39 13.2102 5.26 14.5402 5.26C16.0802 5.26 16.8802 6.38 16.8802 7.94C16.8802 8.21 16.8502 8.48 16.8102 8.62H13.3602C13.4802 9.53 14.0802 10 14.9202 10C15.3702 10 15.7602 9.87 16.1702 9.62L16.6702 10.52C16.1202 10.9 15.4102 11.14 14.7202 11.14ZM13.3302 7.63H15.6202C15.6202 6.88 15.2902 6.4 14.5602 6.4C13.9702 6.4 13.4502 6.82 13.3302 7.63ZM18.9817 11L17.5417 5.4H19.0017L19.6217 8.16C19.7117 8.71 19.7917 9.25 19.8817 9.8H19.9317C20.0417 9.25 20.1417 8.7 20.2817 8.16L20.9617 5.4H22.2617L22.9617 8.16C23.0917 8.71 23.1917 9.25 23.3217 9.8H23.3617C23.4617 9.25 23.5417 8.71 23.6417 8.16L24.2417 5.4H25.6117L24.2317 11H22.5017L21.9117 8.56C21.7917 8.03 21.6917 7.52 21.5817 6.92H21.5317C21.4317 7.52 21.3417 8.04 21.2317 8.56L20.6617 11H18.9817Z" fill="#DD3332"></path></svg></div></div></div></div><div data-v-42da9b4d="" class="menu-item menu-item-ring1"><img data-v-42da9b4d="" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNTYiIHZpZXdCb3g9IjAgMCA0OCA1NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQ2LjM5NzEgMjIuNTY5MUM0Ny45MDg4IDI0LjA4MDggNDcuOTQ5IDI2LjUwMzUgNDYuNjQxNiAyOC4xOTVDNDEuNTM4MSAzNC43OTgyIDM4LjE4MjQgNDIuNzkzNyAzNy4yNTg3IDUxLjUwNkMzNy4wMjkzIDUzLjY2OTggMzUuMjcxMSA1NS40MTMyIDMzLjA5NTEgNTUuNDEzMkg0LjA4NTc3QzEuODQ4NjggNTUuNDEzMiAwLjAzNjc2IDUzLjU3NzMgMC4xODUwMDggNTEuMzQ1MUMwLjc5MTA5OSA0Mi4yMTkyIDIuODgzOTkgMzMuMjQwNiA2LjM5MzU4IDI0Ljc2NzdDOS43OTUyNyAxNi41NTUzIDE0LjQ3MzggOC45NDc5OCAyMC4yNDQgMi4yMjE3OEMyMS43MTAzIDAuNTEyNDY2IDI0LjMxMDcgMC40ODI3MDIgMjUuOTAzMiAyLjA3NTE4TDQ2LjM5NzEgMjIuNTY5MVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=" alt=""><div data-v-42da9b4d="" class="menu-item-content"><img data-v-42da9b4d="" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNiAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuNzMyNzQgMi40MjI2M0M3LjgzODQzIDIuMTk2NzcgOC4xNTk2NCAyLjE5Njc3IDguMjY1MzIgMi40MjI2M0wxMC4xNzk1IDYuNTEzMzJMMTQuNzA4NSA3LjA0MjY2QzE0Ljk1ODkgNy4wNzE5MiAxNS4wNTg4IDcuMzgyMTEgMTQuODcyNSA3LjU1MTk0TDExLjUyNyAxMC42MDE2TDEyLjQxNjIgMTUuMDEyN0MxMi40NjU3IDE1LjI1ODIgMTIuMjA1MiAxNS40NDkyIDExLjk4NTkgMTUuMzI4Mkw3Ljk5OTAzIDEzLjEyODNMNC4wMTIxMiAxNS4zMjgyQzMuNzkyODYgMTUuNDQ5MiAzLjUzMjQgMTUuMjU4MiAzLjU4MTg4IDE1LjAxMjdMNC40NzEwMyAxMC42MDE2TDEuMTI1NTkgNy41NTE5NEMwLjkzOTI4NyA3LjM4MjExIDEuMDM5MTMgNy4wNzE5MiAxLjI4OTUzIDcuMDQyNjZMNS44MTg2MSA2LjUxMzMyTDcuNzMyNzQgMi40MjI2M1oiIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==" alt=""><div data-v-42da9b4d="" class="tooltip-top"><div data-v-42da9b4d="" class="tooltip-content"><span data-v-42da9b4d="">收藏</span><span data-v-42da9b4d="" class="betaTip" style="display: none;">Beta</span><svg data-v-42da9b4d="" width="30" height="14" viewBox="0 0 30 14" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: none;"><rect data-v-42da9b4d="" width="30" height="14" rx="3" fill="#FEF1F1"></rect><path data-v-42da9b4d="" d="M4.91 11V3.59H6.42L8.57 7.54L9.32 9.14H9.37C9.29 8.37 9.17 7.39 9.17 6.55V3.59H10.57V11H9.06L6.93 7.04L6.18 5.45H6.13C6.19 6.25 6.32 7.18 6.32 8.03V11H4.91ZM14.7202 11.14C13.1502 11.14 11.9302 10.05 11.9302 8.2C11.9302 6.39 13.2102 5.26 14.5402 5.26C16.0802 5.26 16.8802 6.38 16.8802 7.94C16.8802 8.21 16.8502 8.48 16.8102 8.62H13.3602C13.4802 9.53 14.0802 10 14.9202 10C15.3702 10 15.7602 9.87 16.1702 9.62L16.6702 10.52C16.1202 10.9 15.4102 11.14 14.7202 11.14ZM13.3302 7.63H15.6202C15.6202 6.88 15.2902 6.4 14.5602 6.4C13.9702 6.4 13.4502 6.82 13.3302 7.63ZM18.9817 11L17.5417 5.4H19.0017L19.6217 8.16C19.7117 8.71 19.7917 9.25 19.8817 9.8H19.9317C20.0417 9.25 20.1417 8.7 20.2817 8.16L20.9617 5.4H22.2617L22.9617 8.16C23.0917 8.71 23.1917 9.25 23.3217 9.8H23.3617C23.4617 9.25 23.5417 8.71 23.6417 8.16L24.2417 5.4H25.6117L24.2317 11H22.5017L21.9117 8.56C21.7917 8.03 21.6917 7.52 21.5817 6.92H21.5317C21.4317 7.52 21.3417 8.04 21.2317 8.56L20.6617 11H18.9817Z" fill="#DD3332"></path></svg></div></div></div></div><div data-v-42da9b4d="" class="menu-item menu-item-ring2"><img data-v-42da9b4d="" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDkiIGhlaWdodD0iNTUiIHZpZXdCb3g9IjAgMCA0OSA1NSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMzLjM0NDcgMC40MTI0NzZDMzUuNDU0MSAwLjQxMjQ3NiAzNy4xODIxIDIuMDU1MTggMzcuNDg3OSA0LjE0MjNDMzguNzI2MyAxMi41OTMyIDQyLjI2MjcgMjAuMzA3NCA0Ny40NDkgMjYuNjQ2MUM0OC44MzIzIDI4LjMzNjggNDguODI3OCAzMC44MjQ4IDQ3LjI4MzEgMzIuMzY5NUwyNi4zNjc5IDUzLjI4NDZDMjQuNzg0OCA1NC44Njc4IDIyLjIwMjggNTQuODQ5MiAyMC43MyA1My4xNjI5QzE0LjczNjUgNDYuMzAwMyA5Ljg4OTgzIDM4LjQ5OTEgNi4zOTMzOCAzMC4wNThDMy4wMTgwNiAyMS45MDkxIDAuOTUyODEzIDEzLjI5MjUgMC4yNjA1MjQgNC41MjY5MUMwLjA4MjkyMDcgMi4yNzgxMyAxLjkwMjAyIDAuNDEyNDc2IDQuMTU3OCAwLjQxMjQ3NkgzMy4zNDQ3WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==" alt=""><div data-v-42da9b4d="" class="menu-item-content"><img data-v-42da9b4d="" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuOTM1NzUgMS4yOTk4SDkuMDY0MzVMOS45NjkwNCAzLjU2MzYzQzEwLjI2NzYgMy43MDYxMSAxMC41NDk0IDMuODggMTAuODEwNSA0LjA4MTIxTDEzLjI2NDkgMy43MjcyNkwxNC4zMjkyIDUuNTcyMzlMMTIuNzA4NSA3LjYzMzkzQzEyLjcxODQgNy43NjM2MSAxMi43MjM0IDcuODczNCAxMi43MjM0IDguMDI3MDFDMTIuNzIzNCA4LjE2MTExIDEyLjcxOTYgOC4yNTY4MyAxMi43MTIxIDguMzcwMjFMMTQuMzI5MiAxMC40MjczTDEzLjI2NDkgMTIuMjcyNEwxMC44NjkxIDExLjkyNjlDMTAuNTg0IDEyLjE1MzggMTAuMjczMyAxMi4zNDc3IDkuOTQyMjkgMTIuNTAzMUw5LjA2NDQxIDE0LjY5OThINi45MzU4MUw2LjA1Nzk1IDEyLjUwMzFDNS43MjY4OSAxMi4zNDc3IDUuNDE2MTYgMTIuMTUzOCA1LjEzMTA0IDExLjkyNjlMMi43MzUyMyAxMi4yNzI0TDEuNjcwOTMgMTAuNDI3M0wzLjI4ODA3IDguMzcwMjVDMy4yODA1MyA4LjI1Njg2IDMuMjc2NyA4LjE0MjQgMy4yNzY3IDguMDI3MDFDMy4yNzY3IDcuODk0NzIgMy4yODE3NCA3Ljc2MzY1IDMuMjkxNjIgNy42MzM5OUwxLjY3MDkgNS41NzI0TDIuNzM1MiAzLjcyNzI3TDUuMTg5NjMgNC4wODEyM0M1LjQ1MDc0IDMuODgwMDIgNS43MzI1MiAzLjcwNjE0IDYuMDMxMDUgMy41NjM2NUw2LjkzNTc1IDEuMjk5OFoiIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTkuNzQ5MDIgOC4wMDE2M0M5Ljc0OTAyIDguOTY5MDIgOC45NjU1MiA5Ljc1MzI1IDcuOTk5MDIgOS43NTMyNUM3LjAzMjUzIDkuNzUzMjUgNi4yNDkwMiA4Ljk2OTAyIDYuMjQ5MDIgOC4wMDE2M0M2LjI0OTAyIDcuMDM0MjMgNy4wMzI1MyA2LjI1IDcuOTk5MDIgNi4yNUM4Ljk2NTUyIDYuMjUgOS43NDkwMiA3LjAzNDIzIDkuNzQ5MDIgOC4wMDE2M1oiIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==" alt=""><div data-v-42da9b4d="" class="tooltip-top"><div data-v-42da9b4d="" class="tooltip-content"><span data-v-42da9b4d="">设置</span><span data-v-42da9b4d="" class="betaTip" style="display: none;">Beta</span><svg data-v-42da9b4d="" width="30" height="14" viewBox="0 0 30 14" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: none;"><rect data-v-42da9b4d="" width="30" height="14" rx="3" fill="#FEF1F1"></rect><path data-v-42da9b4d="" d="M4.91 11V3.59H6.42L8.57 7.54L9.32 9.14H9.37C9.29 8.37 9.17 7.39 9.17 6.55V3.59H10.57V11H9.06L6.93 7.04L6.18 5.45H6.13C6.19 6.25 6.32 7.18 6.32 8.03V11H4.91ZM14.7202 11.14C13.1502 11.14 11.9302 10.05 11.9302 8.2C11.9302 6.39 13.2102 5.26 14.5402 5.26C16.0802 5.26 16.8802 6.38 16.8802 7.94C16.8802 8.21 16.8502 8.48 16.8102 8.62H13.3602C13.4802 9.53 14.0802 10 14.9202 10C15.3702 10 15.7602 9.87 16.1702 9.62L16.6702 10.52C16.1202 10.9 15.4102 11.14 14.7202 11.14ZM13.3302 7.63H15.6202C15.6202 6.88 15.2902 6.4 14.5602 6.4C13.9702 6.4 13.4502 6.82 13.3302 7.63ZM18.9817 11L17.5417 5.4H19.0017L19.6217 8.16C19.7117 8.71 19.7917 9.25 19.8817 9.8H19.9317C20.0417 9.25 20.1417 8.7 20.2817 8.16L20.9617 5.4H22.2617L22.9617 8.16C23.0917 8.71 23.1917 9.25 23.3217 9.8H23.3617C23.4617 9.25 23.5417 8.71 23.6417 8.16L24.2417 5.4H25.6117L24.2317 11H22.5017L21.9117 8.56C21.7917 8.03 21.6917 7.52 21.5817 6.92H21.5317C21.4317 7.52 21.3417 8.04 21.2317 8.56L20.6617 11H18.9817Z" fill="#DD3332"></path></svg></div></div></div></div><div data-v-42da9b4d="" class="menu-item menu-item-ring3"><img data-v-42da9b4d="" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTMiIGhlaWdodD0iNDkiIHZpZXdCb3g9IjAgMCA1MyA0OSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIyLjMzMzMgMS45NzYzOEMyMy44MTk0IDAuNDkwMjQ3IDI2LjE5MiAwLjQyMzQ4NSAyNy44ODE2IDEuNjczNDRDMzMuODAxNiA2LjA1MjkzIDQwLjc5OTUgOS4wODI4OSA0OC40MTE0IDEwLjMwNUM1MC40Njc2IDEwLjYzNTEgNTIuMDY5OSAxMi4zNTA4IDUyLjA2OTkgMTQuNDMzNFY0NC42MjcxQzUyLjA2OTkgNDYuOTA5NyA1MC4xNjEzIDQ4LjczODcgNDcuODg5NCA0OC41MTg0QzM5LjYzOTkgNDcuNzE4NCAzMS41MzkgNDUuNzAxMiAyMy44NTQxIDQyLjUxOEMxNS42NzM4IDM5LjEyOTYgOC4wOTM0IDM0LjQ3NDUgMS4zODY0NSAyOC43MzU1Qy0wLjMyNjEyMiAyNy4yNzAxIC0wLjM1NzQ4OCAyNC42NjcxIDEuMjM2MzEgMjMuMDczM0wyMi4zMzMzIDEuOTc2MzhaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K" alt=""><div data-v-42da9b4d="" class="menu-item-content"><img data-v-42da9b4d="" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNiAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuNzQ5MDIgMi45NjI4MUMxLjc0OTAyIDIuNzk3MTMgMS44ODMzNCAyLjY2MjgxIDIuMDQ5MDIgMi42NjI4MUg2LjQ0OTAyQzYuNjE0NzEgMi42NjI4MSA2Ljc0OTAyIDIuNzk3MTMgNi43NDkwMiAyLjk2MjgxVjUuMTYyODFDNi43NDkwMiA2LjU0MzUyIDUuNjI5NjMgNy42NjI4MSA0LjI0ODkyIDcuNjYyODFDMy4yMzc0NSA3LjY2MjgxIDIuMjU3NTkgNy42NjI4MSAyLjA0OTAyIDcuNjYyODFDMS44ODMzNCA3LjY2MjgxIDEuNzQ5MDIgNy41Mjg1IDEuNzQ5MDIgNy4zNjI4MVYyLjk2MjgxWiIgc3Ryb2tlPSIjMzMzMzMzIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMS43NDkwMiAxNC44NjI4QzEuNzQ5MDIgMTUuMDI4NSAxLjg4MzM0IDE1LjE2MjggMi4wNDkwMiAxNS4xNjI4SDYuNDQ5MDJDNi42MTQ3MSAxNS4xNjI4IDYuNzQ5MDIgMTUuMDI4NSA2Ljc0OTAyIDE0Ljg2MjhWMTIuNjYyOEM2Ljc0OTAyIDExLjI4MjEgNS42Mjk2MyAxMC4xNjI4IDQuMjQ4OTIgMTAuMTYyOEMzLjIzNzQ1IDEwLjE2MjggMi4yNTc1OSAxMC4xNjI4IDIuMDQ5MDIgMTAuMTYyOEMxLjg4MzM0IDEwLjE2MjggMS43NDkwMiAxMC4yOTcxIDEuNzQ5MDIgMTAuNDYyOFYxNC44NjI4WiIgc3Ryb2tlPSIjMzMzMzMzIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNOS4yNDcyMSAyLjY2MzQxVjUuMTY0NzlDOS4yNDcyMSA2LjU0NjU5IDEwLjM2NzQgNy42NjY3NSAxMS43NDkyIDcuNjY2NzVDMTMuMTMxIDcuNjY2NzUgMTQuMjUxMSA2LjU0NjU5IDE0LjI1MTEgNS4xNjQ3OUMxNC4yNTExIDMuNzgzIDEzLjEzMSAyLjY2Mjg0IDExLjc0OTIgMi42NjI4NEw5LjI0NzIxIDIuNjYzNDFaTTkuMjQ3MjEgMi42NjM0MUM5LjI0NzIxIDIuNjYzMSA5LjI0NjkgMi42NjM0MSA5LjI0NzIxIDIuNjYzNDFaIiBzdHJva2U9IiMzMzMzMzMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik05LjI0NzIxIDE1LjE2NjJWMTIuNjY0OEM5LjI0NzIxIDExLjI4MyAxMC4zNjc0IDEwLjE2MjggMTEuNzQ5MiAxMC4xNjI4QzEzLjEzMSAxMC4xNjI4IDE0LjI1MTEgMTEuMjgzIDE0LjI1MTEgMTIuNjY0OEMxNC4yNTExIDE0LjA0NjYgMTMuMTMxIDE1LjE2NjcgMTEuNzQ5MiAxNS4xNjY3TDkuMjQ3MjEgMTUuMTY2MlpNOS4yNDcyMSAxNS4xNjYyQzkuMjQ3MjEgMTUuMTY2NSA5LjI0NjkgMTUuMTY2MiA5LjI0NzIxIDE1LjE2NjJaIiBzdHJva2U9IiMzMzMzMzMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=" alt=""><div data-v-42da9b4d="" class="tooltip-top"><div data-v-42da9b4d="" class="tooltip-content"><span data-v-42da9b4d="">更多</span><span data-v-42da9b4d="" class="betaTip" style="display: none;">Beta</span><svg data-v-42da9b4d="" width="30" height="14" viewBox="0 0 30 14" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: none;"><rect data-v-42da9b4d="" width="30" height="14" rx="3" fill="#FEF1F1"></rect><path data-v-42da9b4d="" d="M4.91 11V3.59H6.42L8.57 7.54L9.32 9.14H9.37C9.29 8.37 9.17 7.39 9.17 6.55V3.59H10.57V11H9.06L6.93 7.04L6.18 5.45H6.13C6.19 6.25 6.32 7.18 6.32 8.03V11H4.91ZM14.7202 11.14C13.1502 11.14 11.9302 10.05 11.9302 8.2C11.9302 6.39 13.2102 5.26 14.5402 5.26C16.0802 5.26 16.8802 6.38 16.8802 7.94C16.8802 8.21 16.8502 8.48 16.8102 8.62H13.3602C13.4802 9.53 14.0802 10 14.9202 10C15.3702 10 15.7602 9.87 16.1702 9.62L16.6702 10.52C16.1202 10.9 15.4102 11.14 14.7202 11.14ZM13.3302 7.63H15.6202C15.6202 6.88 15.2902 6.4 14.5602 6.4C13.9702 6.4 13.4502 6.82 13.3302 7.63ZM18.9817 11L17.5417 5.4H19.0017L19.6217 8.16C19.7117 8.71 19.7917 9.25 19.8817 9.8H19.9317C20.0417 9.25 20.1417 8.7 20.2817 8.16L20.9617 5.4H22.2617L22.9617 8.16C23.0917 8.71 23.1917 9.25 23.3217 9.8H23.3617C23.4617 9.25 23.5417 8.71 23.6417 8.16L24.2417 5.4H25.6117L24.2317 11H22.5017L21.9117 8.56C21.7917 8.03 21.6917 7.52 21.5817 6.92H21.5317C21.4317 7.52 21.3417 8.04 21.2317 8.56L20.6617 11H18.9817Z" fill="#DD3332"></path></svg></div></div></div></div></div></div><div data-v-42da9b4d="" id="wps_disablefeature_menu" class="menu" style="display: none;"><button class="menu_item">隐藏直到下次访问</button><button class="menu_item">在此网站禁用</button><button class="menu_item">全局禁用</button><div class="menu_item menu_last"></div><button class="menu_item">在<span class="menu_setting">设置</span>中可以重新启用</button><div class="menu_item menu_contact"> 联系我们 <div class="menu_img feedback_txt" style="display: none;"><img src="data:image/png;base64,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" alt="" srcset=""><span class="feedback_txt">微信扫码进群</span></div></div></div></div></template></wps-floating-ball><wps-ai-ocr id="wps-ai-ocr" style="position: absolute; left: 0px; top: 0px; z-index: 2147483647;"><template shadowrootmode="open"><style>*{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Noto Sans","Noto Sans CJK SC","Microsoft YaHei","微软雅黑",sans-serif;font-size:14px;user-select:none}div,input,li,ol,p,span,text,ul{margin:0;padding:0;border:0;color:rgba(13,13,13,.9)}img{margin:0;padding:0}li,ol,ul{list-style:none}input,select,text,textarea{outline:0}a,a:active,a:hover,a:link,a:visited{color:rgba(13,13,13,.9);text-decoration:none;outline:0}a:hover{color:#3d4757;text-decoration:none}a:hidefocus{outline:0}a:focus{outline:0}::-webkit-scrollbar{width:6px;height:4px}::-webkit-scrollbar-button{background-color:none;height:10px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#dbdbdb;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#ccd0d6}::-webkit-scrollbar-thumb:active{background:#ccd0d6}::-webkit-scrollbar-corner{background:0 0}::-webkit-scrollbar-resizer{background:0 0}@keyframes fadeinframes{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes loadSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}.wps_ai_fadein{animation:fadeinframes 150ms ease}button{background:0 0;border:0;margin:0;padding:0;cursor:pointer;text-align:left;border-radius:6px;outline:0;font-size:14px;text-shadow:none;box-shadow:none;box-sizing:border-box;display:flex;justify-content:center;align-items:center}button:hover{background:rgba(13,13,13,.06)}button:active{background:rgba(13,13,13,.1)}.text-tooltip-container{position:relative;display:inline-block}.text-tooltip-container .tooltip{position:absolute;left:50%;transform:translateX(-50%);z-index:1}.text-tooltip-container .tooltip .tooltip-content{color:#fff;padding:6px 12px;white-space:nowrap;border-radius:8px;background:#575757}.text-tooltip-container .tooltip .tooltip-arrow{width:0;height:0;margin:0 auto}.text-tooltip-container .tooltip-top{top:-40px}.text-tooltip-container .tooltip-top .tooltip-arrow-top{border-left:10px solid transparent;border-right:10px solid transparent;border-top:5px solid #575757}.text-tooltip-container .tooltip-bottom{top:calc(100% + 8px)}.text-tooltip-container .tooltip-bottom .tooltip-arrow-bottom{border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:5px solid #575757}.setting-menu{display:none;z-index:2;padding:0 6px 0 6px;width:180px}.setting-menu.mini-menu{width:108px}.setting-menu .list{display:flex;flex-direction:column;width:100%;padding:8px;box-sizing:border-box;overflow-y:auto;border-radius:8px;border:1px solid rgba(13,13,13,.12);background:#fff;box-shadow:0 4px 20px 0 rgba(0,0,0,.1)}.setting-menu .item{height:34px;line-height:34px;color:rgba(13,13,13,.9);width:100%;display:flex;align-items:center;justify-content:flex-start;font-size:14px;border-radius:4px;margin-bottom:4px;padding-left:8px}.setting-menu .item:hover{background:#f0f0f0}.setting-menu .item-span{margin-left:8px}.setting-menu .item-end{margin-bottom:0}.setting-menu .line{border-top:1px solid #f5f5f5;margin-bottom:4px}.setting-menu .btn{color:#2f60ca}.ocr-large-entry{position:absolute;z-index:10;background:rgba(13,13,13,.5);backdrop-filter:blur(8px)}.ocr-large-entry .bottom-container{width:100%;height:45px;display:flex;align-items:center;justify-content:center;gap:8px}.ocr-large-entry .bottom-container .bottom-button{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:6px;cursor:pointer}.ocr-large-entry .bottom-container .bottom-button img{width:16px;height:16px}.ocr-large-entry .bottom-container .bottom-button:hover{background:rgba(245,245,245,.06)}.ocr-large-entry .bottom-container .bottom-button:active{background:rgba(245,245,245,.1)}.ocr-large-entry .bottom-container .bottom-button-setting{position:relative}.ocr-large-entry .bottom-container .bottom-button-setting .bottom-setting-menu{top:32px;left:-8px;position:absolute;display:block}.ocr-large-entry .bottom-container .bottom-button-split{width:1px;height:20px;background:rgba(245,245,245,.14)}.ocr-middle-entry{box-sizing:border-box;position:absolute;z-index:10;display:flex}.ocr-middle-entry .button-list{min-width:106px;min-height:56px;cursor:pointer;flex-shrink:0;display:flex;align-items:center}.ocr-middle-entry .button-list .button{display:flex;align-items:center;justify-content:center;gap:6px;border-radius:8px;background:rgba(13,13,13,.5)}.ocr-middle-entry .button-list .button span{color:#fff}.ocr-middle-entry .button-list .button:hover{background:rgba(13,13,13,.8)}.ocr-middle-entry .button-list .button:active{background:rgba(13,13,13,.8)}.ocr-middle-entry .button-list .button-func{width:66px;height:32px}.ocr-middle-entry .button-list .button-more{width:32px;height:32px;margin:12px 12px 12px 6px}.ocr-middle-entry .button-list .button-more .more{width:16px;height:16px;pointer-events:none}.ocr-middle-menu-first{background-color:#fff;width:170px;border-radius:8px;border:1px solid rgba(13,13,13,.12);box-shadow:0 12px 32px 0 rgba(13,13,13,.08);padding:8px;position:absolute;top:40px;left:72px;margin-top:8px}.ocr-middle-menu-first .item{padding:0 8px;width:100%;box-sizing:border-box;position:relative}.ocr-middle-menu-first .info{height:32px;display:flex;align-items:center;margin-bottom:4px;border-radius:6px;width:100%;box-sizing:border-box;padding:0 8px;position:relative;color:rgba(13,13,13,.9)}.ocr-middle-menu-first .info:hover{background:#f0f0f0}.ocr-middle-menu-first .icon{width:16px;height:16px;margin-right:8px}.ocr-middle-menu-first .operate{width:16px;height:16px}.ocr-middle-menu-first .text{width:98px}.ocr-middle-menu-first .item-set:hover .ocr-middle-menu-second{display:block}.ocr-middle-menu-first .item-set:hover .info{background:#f0f0f0}.ocr-middle-menu-second{position:absolute;top:0;left:168px}.ocr_menu_first_right{left:unset;right:12px}.ocr_menu_first_top{top:-127px}.ocr_menu_second_top{top:-128px}.ocr_menu_second_right{right:168px;left:unset}.extract{box-sizing:border-box;position:absolute;width:420px;padding:0 24px 16px;border:1px solid rgba(13,13,13,.12);border-radius:8px;background:#fff;box-shadow:0 1px 4px 0 rgba(13,13,13,.14);font-size:14px;color:rgba(13,13,13,.9);z-index:11;user-select:none}.extract .head{display:flex;align-items:stretch;margin-bottom:8px;flex-direction:column;cursor:pointer}.extract .head:active{cursor:move}.extract .head .grab{height:16px;display:flex;align-items:center;justify-content:center;pointer-events:none}.extract .head .grab_img{display:none}.extract .head:hover .grab_img{display:block}.extract .head .brand{display:flex;align-items:center;justify-content:space-between}.extract .head .brand .logo{pointer-events:none}.extract .main_title{margin:0 8px 0 4px;font-weight:600;font-size:16px;flex-grow:1;text-align:left}.extract .main_close{width:24px;height:24px;display:flex;justify-content:center;align-items:center;margin-left:8px}.extract .main_feedback{width:24px;height:24px;display:flex;justify-content:center;align-items:center;position:relative}.extract .main_feedback .feedback_img{display:none;position:absolute;top:28px;left:0;transform:translateX(calc(-50% + 4px));padding:12px;flex-direction:column;justify-content:center;align-items:center;gap:2px;border-radius:4px;border:1px solid rgba(13,13,13,.12);background:#fff;box-shadow:0 12px 32px 0 rgba(13,13,13,.08);color:rgba(13,13,13,.46);font-size:12px}.extract .main_feedback .feedback_img>img{width:100px;height:100px}.extract .main_feedback .feedback_txt{color:rgba(13,13,13,.9);font-size:12px}.extract .main_feedback:hover .feedback_img{display:flex}.extract .mainbox{border-radius:4px;display:flex;flex-direction:column;justify-content:space-between}.extract .status_error,.extract .status_stop{padding:8px 16px 12px}.extract .tips{display:flex;align-items:center;line-height:26px;padding:0}.extract .loading{width:16px;height:16px;margin-right:8px;animation:loadSpin 1.2s linear infinite}.extract .printer_text{overflow-y:auto;line-height:1.5;max-height:482px;display:block;letter-spacing:1px;white-space:pre-wrap;text-align:left}.extract .ctrlgroup{height:34px;margin-top:16px;display:flex;align-items:center;justify-content:right}.extract .ctrlgroup .btn{padding:0 20px;box-shadow:0 0 0 1px rgba(13,13,13,.1),0 1px 0 0 rgba(13,13,13,.14)}.extract .main_select{position:relative;flex-grow:1}.extract .select_active{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100px;height:34px;line-height:24px;padding:0 6px;border-radius:4px;border:1px solid rgba(13,13,13,.12);color:#2e6eff;background:0 0}.extract .select_active_loading{cursor:not-allowed}.extract .select_active_showselect{border:1px solid #0a6cff}.extract .select_activetext{font-size:14px;color:#0a6cff;text-align:center;font-style:normal;font-weight:600;flex-grow:1}.extract .select_list{display:flex;flex-direction:column;width:100px;height:176px;padding:8px;box-sizing:border-box;position:absolute;top:-180px;left:0;z-index:2;overflow-y:auto;border-radius:4px;border:1px solid rgba(13,13,13,.12);background:#fff;box-shadow:0 4px 20px 0 rgba(0,0,0,.1)}.extract .select_item{height:34px;width:100%;display:flex;align-items:center;justify-content:center;font-size:14px;border-radius:4px;margin-bottom:4px}.extract .select_item:hover{background:rgba(31,105,224,.1)}.extract .select_item_actice{background:rgba(31,105,224,.1);color:#0a6cff;font-style:normal;font-weight:600}.extract .select_item_span{line-height:34px}.extract .btn{display:flex;align-items:center;justify-content:center;padding:0 8px;border-radius:4px;line-height:34px;height:34px;margin-left:12px;font-size:14px}.extract .btntext{margin-left:4px;font-size:14px}.extract .stop{display:flex;flex-direction:column;align-items:center;justify-content:center}.extract .stop .stoptext{margin:2px 0 8px;color:rgba(13,13,13,.66)}.extract .stop .btn{margin:0 auto 12px;width:66px}.extract .stop .btntext{margin:0 0 0 4px}</style><div id="wps_ocr_mainbox"><div id="wps_ocr_large_img_entry" class="ocr-large-entry" style="display: none;"><div class="bottom-container" style="width: 1780px;"><div class="text-tooltip-container"><!----></div><div class="text-tooltip-container"><!----></div><div class="text-tooltip-container"><!----></div><div class="text-tooltip-container"><!----></div><div class="text-tooltip-container"><!----></div><div class="text-tooltip-container" id="wps_ocr_large_img_func_entry"><div class="bottom-button"><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuNzU5NzcgMTQuMjQyOEw1LjI0NjEyIDEwLjc1Mk01LjI0NjEyIDEwLjc1MkwxLjc1OTc3IDEwLjc1Mk01LjI0NjEyIDEwLjc1Mkw1LjI0NjEyIDE0LjI0MjgiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTggMTQuMjVIMTIuNzVDMTMuNTc4NCAxNC4yNSAxNC4yNSAxMy41Nzg0IDE0LjI1IDEyLjc1VjMuMjVDMTQuMjUgMi40MjE1NyAxMy41Nzg0IDEuNzUgMTIuNzUgMS43NUgzLjI1QzIuNDIxNTcgMS43NSAxLjc1IDIuNDIxNTcgMS43NSAzLjI1VjgiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS41Ii8+CjxwYXRoIGQ9Ik01Ljc1IDUuMjVIMTAuMjVNOCAxMC4yNVY1LjI1IiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cjwvc3ZnPgo=" alt="提取文字"></div><!----></div><div class="text-tooltip-container"><!----></div><div class="bottom-button-split"></div><div class="text-tooltip-container"><div class="bottom-button"><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuNzMzNzIgMS41MDk2N0M3LjgzOTQxIDEuMjgzODEgOC4xNjA2MSAxLjI4MzgxIDguMjY2MyAxLjUwOTY3TDEwLjE4MDQgNS42MDAzNUwxNC43MDk1IDYuMTI5NjlDMTQuOTU5OSA2LjE1ODk2IDE1LjA1OTggNi40NjkxNCAxNC44NzM1IDYuNjM4OThMMTEuNTI4IDkuNjg4NjVMMTIuNDE3MiAxNC4wOTk3QzEyLjQ2NjYgMTQuMzQ1MiAxMi4yMDYyIDE0LjUzNjIgMTEuOTg2OSAxNC40MTUyTDguMDAwMDEgMTIuMjE1NEw0LjAxMzEgMTQuNDE1MkMzLjc5Mzg0IDE0LjUzNjIgMy41MzMzOCAxNC4zNDUyIDMuNTgyODYgMTQuMDk5N0w0LjQ3MjAxIDkuNjg4NjVMMS4xMjY1NyA2LjYzODk4QzAuOTQwMjY0IDYuNDY5MTQgMS4wNDAxMSA2LjE1ODk2IDEuMjkwNSA2LjEyOTY5TDUuODE5NTkgNS42MDAzNUw3LjczMzcyIDEuNTA5NjdaIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K" alt="收藏"></div><!----></div><div class="text-tooltip-container"><div class="bottom-button"><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuNzUgMTEuNzVWMTMuNzVDMS43NSAxNC4wMjYxIDEuOTczODYgMTQuMjUgMi4yNSAxNC4yNUgxMy43NUMxNC4wMjYxIDE0LjI1IDE0LjI1IDE0LjAyNjEgMTQuMjUgMTMuNzVWMTEuNzVNOCAxLjc1VjkuNU01IDYuNzVMNy43ODc4NyA5LjUzNzg3QzcuOTA1MDMgOS42NTUwMyA4LjA5NDk3IDkuNjU1MDMgOC4yMTIxMyA5LjUzNzg3TDExIDYuNzUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+Cg==" alt="下载"></div><!----></div><div class="text-tooltip-container"><div class="bottom-button bottom-button-setting"><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMgMTMuMDAwMkwxMyAzLjAwMDI0TTMgMy4wMDAyNEwxMyAxMy4wMDAyIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=" alt="关闭此功能"><div class="bottom-setting-menu setting-menu" style="display: none;"><div class="list"><button class="item">隐藏直到下次访问</button><button class="item">在此网站禁用</button><button class="item">全局禁用</button><div class="line"></div><button class="item item-end">在<span class="btn">设置</span>中可以重新启用</button></div></div></div><!----></div></div></div><div id="wps_ocr_middle_img_entry" class="ocr-middle-entry" style="top: 2604.66px; left: 1200px; display: none;"><div class="button-list"><div class="button-func"></div><div class="button button-more"><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuNzUgMi4wNUMxLjc1IDEuODg0MzEgMS44ODQzMSAxLjc1IDIuMDUgMS43NUg2LjQ1QzYuNjE1NjkgMS43NSA2Ljc1IDEuODg0MzEgNi43NSAyLjA1VjYuNDVDNi43NSA2LjYxNTY5IDYuNjE1NjkgNi43NSA2LjQ1IDYuNzVIMi4wNUMxLjg4NDMxIDYuNzUgMS43NSA2LjYxNTY5IDEuNzUgNi40NVYyLjA1WiIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTEuNzUgOS41NUMxLjc1IDkuMzg0MzEgMS44ODQzMSA5LjI1IDIuMDUgOS4yNUg2LjQ1QzYuNjE1NjkgOS4yNSA2Ljc1IDkuMzg0MzEgNi43NSA5LjU1VjEzLjk1QzYuNzUgMTQuMTE1NyA2LjYxNTY5IDE0LjI1IDYuNDUgMTQuMjVIMi4wNUMxLjg4NDMxIDE0LjI1IDEuNzUgMTQuMTE1NyAxLjc1IDEzLjk1VjkuNTVaIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNOS4yNSA5LjU1QzkuMjUgOS4zODQzMSA5LjM4NDMxIDkuMjUgOS41NSA5LjI1SDEzLjk1QzE0LjExNTcgOS4yNSAxNC4yNSA5LjM4NDMxIDE0LjI1IDkuNTVWMTMuOTVDMTQuMjUgMTQuMTE1NyAxNC4xMTU3IDE0LjI1IDEzLjk1IDE0LjI1SDkuNTVDOS4zODQzMSAxNC4yNSA5LjI1IDE0LjExNTcgOS4yNSAxMy45NVY5LjU1WiIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTkuMjUgMi4wNUM5LjI1IDEuODg0MzEgOS4zODQzMSAxLjc1IDkuNTUgMS43NUgxMy45NUMxNC4xMTU3IDEuNzUgMTQuMjUgMS44ODQzMSAxNC4yNSAyLjA1VjYuNDVDMTQuMjUgNi42MTU2OSAxNC4xMTU3IDYuNzUgMTMuOTUgNi43NUg5LjU1QzkuMzg0MzEgNi43NSA5LjI1IDYuNjE1NjkgOS4yNSA2LjQ1VjIuMDVaIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K" alt="更多" class="more"></div></div><div id="wps_ocr_middle_menu" class="ocr-middle-menu-first" style="display: none;"><!----><button class="item"><div class="info"><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuNzU5NzcgMTQuMjQyOEw1LjI0NjEyIDEwLjc1Mk01LjI0NjEyIDEwLjc1MkwxLjc1OTc3IDEwLjc1Mk01LjI0NjEyIDEwLjc1Mkw1LjI0NjEyIDE0LjI0MjgiIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNOCAxNC4yNUgxMi43NUMxMy41Nzg0IDE0LjI1IDE0LjI1IDEzLjU3ODQgMTQuMjUgMTIuNzVWMy4yNUMxNC4yNSAyLjQyMTU3IDEzLjU3ODQgMS43NSAxMi43NSAxLjc1SDMuMjVDMi40MjE1NyAxLjc1IDEuNzUgMi40MjE1NyAxLjc1IDMuMjVWOCIgc3Ryb2tlPSIjMzMzMzMzIiBzdHJva2Utd2lkdGg9IjEuNSIvPgo8cGF0aCBkPSJNNS43NSA1LjI1SDEwLjI1TTggMTAuMjVWNS4yNSIgc3Ryb2tlPSIjMzMzMzMzIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cjwvc3ZnPgo=" alt="" class="icon"><div class="text">提取文字</div></div></button><button class="item"><div class="info"><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuNzMzNzIgMS41MDk2N0M3LjgzOTQxIDEuMjgzODEgOC4xNjA2MSAxLjI4MzgxIDguMjY2MyAxLjUwOTY3TDEwLjE4MDQgNS42MDAzNUwxNC43MDk1IDYuMTI5NjlDMTQuOTU5OSA2LjE1ODk2IDE1LjA1OTggNi40NjkxNCAxNC44NzM1IDYuNjM4OThMMTEuNTI4IDkuNjg4NjVMMTIuNDE3MiAxNC4wOTk3QzEyLjQ2NjYgMTQuMzQ1MiAxMi4yMDYyIDE0LjUzNjIgMTEuOTg2OSAxNC40MTUyTDguMDAwMDEgMTIuMjE1NEw0LjAxMzEgMTQuNDE1MkMzLjc5Mzg0IDE0LjUzNjIgMy41MzMzOCAxNC4zNDUyIDMuNTgyODYgMTQuMDk5N0w0LjQ3MjAxIDkuNjg4NjVMMS4xMjY1NyA2LjYzODk4QzAuOTQwMjY0IDYuNDY5MTQgMS4wNDAxMSA2LjE1ODk2IDEuMjkwNSA2LjEyOTY5TDUuODE5NTkgNS42MDAzNUw3LjczMzcyIDEuNTA5NjdaIiBzdHJva2U9IiMzMzMzMzMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=" alt="" class="icon"><div class="text">收藏到WPS</div></div></button><button class="item"><div class="info"><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuNzUgMTEuNzVWMTMuNzVDMS43NSAxNC4wMjYxIDEuOTczODYgMTQuMjUgMi4yNSAxNC4yNUgxMy43NUMxNC4wMjYxIDE0LjI1IDE0LjI1IDE0LjAyNjEgMTQuMjUgMTMuNzVWMTEuNzVNOCAxLjc1VjkuNU01IDYuNzVMNy43ODc4NyA5LjUzNzg3QzcuOTA1MDMgOS42NTUwMyA4LjA5NDk3IDkuNjU1MDMgOC4yMTIxMyA5LjUzNzg3TDExIDYuNzUiIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4K" alt="" class="icon"><div class="text">下载</div></div></button><!----><button class="item item-set"><div class="info"><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyLjc3MyAzLjIyNzA0TDMuMjI3MDIgMTIuNzczTTEuMjUgOEMxLjI1IDExLjcyNzkgNC4yNzIwOCAxNC43NSA4IDE0Ljc1QzExLjcyNzkgMTQuNzUgMTQuNzUgMTEuNzI3OSAxNC43NSA4QzE0Ljc1IDQuMjcyMDggMTEuNzI3OSAxLjI1IDggMS4yNUM0LjI3MjA4IDEuMjUgMS4yNSA0LjI3MjA4IDEuMjUgOFoiIHN0cm9rZT0iIzMzMzMzMyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==" alt="" class="icon"><div class="text">关闭此功能</div><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYgMy4yNUwxMC41IDguMDAwMDlMNiAxMi43NSIgc3Ryb2tlPSIjNzU3NTc1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==" alt="" class="operate"></div><div class="ocr-middle-menu-second setting-menu"><div class="list"><button class="item">隐藏直到下次访问</button><button class="item">在此网站禁用</button><button class="item">全局禁用</button><div class="line"></div><button class="item item-end">在<span class="btn">设置</span>中可以重新启用</button></div></div></button></div></div><div id="wps_transfer_modal" class="extract" style="display: none;"><div class="head"><div class="grab"><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEgNi41SDE1VjhIMVY2LjVaIiBmaWxsPSIjMEQwRDBEIiBmaWxsLW9wYWNpdHk9IjAuMTIiLz4KPHBhdGggZD0iTTEgMTAuNUgxNVYxMkgxVjEwLjVaIiBmaWxsPSIjMEQwRDBEIiBmaWxsLW9wYWNpdHk9IjAuMTIiLz4KPC9zdmc+Cg==" alt="" srcset="" class="grab_img"></div><div class="brand"><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE2LjMxMjQgNi4wNTg0Mkw5LjMwNTQ5IDE5LjgzMkM5LjAyOTY4IDIwLjM3NDIgOC40ODExNSAyMC42ODU5IDcuOTEyNTYgMjAuNjg1QzcuMzQzOTQgMjAuNjg1OSA2Ljc5NTM5IDIwLjM3NDIgNi41MTk1OSAxOS44MzJMMC4xNzAyNzUgNy4zNTExN0MwLjAxMzM1OTggNy4wNDI3MiAtMC4wMzE0MjUgNi43MDY1OCAwLjAyMDgwMSA2LjM4OTM0QzAuMTA2Mzg0IDUuNjA3OTUgMC43Njc1OTQgNSAxLjU3MDU3IDVIOS42OTczMkMxMC4zNDYxIDUgMTAuOTAyMyA1LjM5Njg3IDExLjEzNzIgNS45NjE0NUwxMS40Njg2IDYuNjEyOTRMOS43MTc4OCAxMC4wNTEzTDguNzM3MDUgOC4xMjMyOUg0LjA2Mjk1TDcuOTEyNTIgMTUuNjkwNEwxMi44NTE4IDUuOTgxMjFDMTMuMTU4MSA1LjM3OTE2IDEzLjc3NjQgNSAxNC40NTE4IDVIMTcuODczMkMxNy41NjYxIDUuMDExODMgMTcuMjc3MyA1LjA5OTMzIDE3LjAwNjYgNS4yNjI1QzE2Ljc0NjcgNS40MTkxNCAxNi41MjE5IDUuNjcyMjUgMTYuMzMyIDYuMDIxODJMMTYuMzEyNyA2LjA1Nzg5TDE2LjMxMjQgNi4wNTg0MloiIGZpbGw9IiNGRjE1MjIiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xOC45NDQ3IDVDMTguNjM3NSA1LjAxMTgzIDE4LjM0ODcgNS4wOTkzMyAxOC4wNzggNS4yNjI1QzE3LjgxODEgNS40MTkxNCAxNy41OTMzIDUuNjcyMjUgMTcuNDAzNCA2LjAyMTgyTDE3LjM4MjUgNi4wNjA5MUwxNi4zMzMzIDguMTIzMzFMMTkuOTM1NiA4LjEyMzNMMTYuMDg2MiAxNS42ODk5TDE0LjI4NTEgMTIuMTQ5NEwxMi45MTM2IDE0Ljg0NTRMMTIuOTA2NyAxNC44NDI5TDEyLjUzMDkgMTUuNTgwOEwxNC42OTUxIDE5LjgzNDlDMTQuOTY3MSAyMC4zNjc5IDE1LjUwMzcgMjAuNjc3NCAxNi4wNjMxIDIwLjY4NDlDMTYuMDY5NyAyMC42ODUgMTYuMDc2MyAyMC42ODUgMTYuMDgzIDIwLjY4NUgxNi4wODk3QzE2LjA5NzYgMjAuNjg1IDE2LjEwNTUgMjAuNjg1IDE2LjExMzQgMjAuNjg0OEMxNi42NzE0IDIwLjY3NiAxNy4yMDYyIDIwLjM2NjcgMTcuNDc3NiAxOS44MzQ5TDE3LjQ3ODQgMTkuODMzMkwyMy44MzAyIDcuMzQ3NThDMjMuOTU3MSA3LjA5ODE3IDI0LjAxMDQgNi44MzA2NiAyMy45OTgzIDYuNTY5NzZMMjMuOTk4MyA2LjU1OTA1QzIzLjk5ODMgNS42OTgwMSAyMy4zMDAzIDUgMjIuNDM5MyA1SDE4Ljk0NDdaTTE2LjEwOTggMjAuNjg0OEwxNi4xMTM0IDIwLjY4NDhDMTYuMTEyMiAyMC42ODQ4IDE2LjExMSAyMC42ODQ4IDE2LjEwOTggMjAuNjg0OFpNMTYuMDU5MyAyMC42ODQ4TDE2LjA2MzEgMjAuNjg0OUMxNi4wNjE5IDIwLjY4NDggMTYuMDYwNiAyMC42ODQ4IDE2LjA1OTMgMjAuNjg0OFoiIGZpbGw9IiNGRjE1MjIiLz4KPC9zdmc+Cg==" alt="" srcset="" class="logo"><span class="main_title">图片提取文字</span><button class="main_feedback"><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQuNzQ5ODggNS43NUgzLjI1QzIuNDIxNTcgNS43NSAxLjc1IDYuNDIxNTcgMS43NSA3LjI1VjkuOTk5NzJDMS43NSAxMC42OTAxIDIuMzA5NjQgMTEuMjQ5NyAzIDExLjI0OTdINC40NDk5OUM0LjYxNTY4IDExLjI0OTcgNC43NSAxMS4xMTU0IDQuNzQ5OTkgMTAuOTQ5N0w0Ljc0OTg4IDUuNzVaTTQuNzQ5ODggNS43NUw0Ljc1IDUuMjVDNC43NSAzLjMxNyA2LjIyNTgxIDEuNzUgOC4wMDAxMiAxLjc1QzkuNzc0NDIgMS43NSAxMS4yNDQ3IDMuMzE1NjMgMTEuMjQ0NyA1LjI0ODYzVjEwLjEyNjZDMTEuMjQ0NyAxMS45NjIxIDEwLjUwMDEgMTQgNy43NTAxMiAxNC4yNU0xMS4yNDc4IDUuNzVMMTIuNzUwNyA1Ljc1MDY5QzEzLjU3ODggNS43NTEwNyAxNC4yNSA2LjQyMjUzIDE0LjI1IDcuMjUwNjlWOS43NDkyOEMxNC4yNSAxMC41NzggMTMuNTc4IDExLjI0OTcgMTIuNzQ5MyAxMS4yNDkzTDExLjI0NDcgMTEuMjQ4NiIgc3Ryb2tlPSIjNzU3NTc1IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=" alt="" srcset=""><div class="feedback_img"><img src="data:image/png;base64,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" alt="" srcset=""><span class="feedback_txt">微信扫码进群</span></div></button><button class="main_close"><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik03IDE3LjAwMDJMMTcgNy4wMDAyNE03IDcuMDAwMjRMMTcgMTcuMDAwMiIgc3Ryb2tlPSIjNzU3NTc1IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPgo8L3N2Zz4K" alt="" srcset=""></button></div></div><div class="mainbox status_"><div class="tips" style="display: none;"><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik04IDJDNC42ODYyOSAyIDIgNC42ODYzIDIgOEMyIDExLjMxMzcgNC42ODYyOSAxNCA4IDE0IiBzdHJva2U9InVybCgjcGFpbnQwX2xpbmVhcl8zNDMxXzEyNjcpIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIC8+CiAgICA8cGF0aCBkPSJNOCAyQzExLjMxMzcgMiAxNCA0LjY4NjMgMTQgNy45OTk5NkMxNCAxMC4yMjA4IDEyLjc5MzQgMTIuMTU5OCAxMSAxMy4xOTczIiBzdHJva2U9InVybCgjcGFpbnQxX2xpbmVhcl8zNDMxXzEyNjcpIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIC8+CiAgICA8cGF0aCBkPSJNOCAxNEM5LjA5Mjg2IDE0IDEwLjExNzUgMTMuNzA3OCAxMSAxMy4xOTczIiBzdHJva2U9IiMxRjY5RTAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiAvPgogICAgPGRlZnM+CiAgICAgICAgPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzM0MzFfMTI2NyIgeDE9IjcuNSIgeTE9IjE0IiB4Mj0iOCIgeTI9IjMiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzBBNkNGRiIgc3RvcC1vcGFjaXR5PSIwIiAvPgogICAgICAgICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwQTZDRkYiIHN0b3Atb3BhY2l0eT0iMC41IiAvPgogICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICAgICAgPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDFfbGluZWFyXzM0MzFfMTI2NyIgeDE9IjgiIHkxPSIxMiIgeDI9IjgiIHkyPSIzIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMzQjY0RkMiIC8+CiAgICAgICAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzBBNkNGRiIgc3RvcC1vcGFjaXR5PSIwLjUiIC8+CiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDwvZGVmcz4KPC9zdmc+Cg==" alt="" srcset="" class="loading"><span>结果生成中...</span></div><div class="printer_text" style="display: none;"></div><div class="ctrlgroup" style="display: none;"><button class="btn" style="display: none;"><span class="btntext">复制</span></button><button class="btn" style="display: none;"><span class="btntext">停止</span></button></div><div class="stop" style="display: none;"><img src="data:image/svg+xml;base64,IDxzdmcgd2lkdGg9IjYwIiBoZWlnaHQ9IjYwIiB2aWV3Qm94PSIwIDAgNjAgNjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBvcGFjaXR5PSIwLjQiIGQ9Ik04LjM0MDMzIDExLjc2QzguMzQwMzMgOS4yNDE1MyAxMC4zODE5IDcuMTk5OTUgMTIuOTAwMyA3LjE5OTk1SDQwLjE3MDNWMTUuNzVIOC4zNDAzM1YxMS43NloiIGZpbGw9IiNDMENBREQiIC8+CiAgICA8cGF0aCBvcGFjaXR5PSIwLjUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjguNTg3NyAyNEgzMS41NTgyQzMyLjQ3NCAyNCAzMy4xOTk4IDI0LjUyMzQgMzMuMTQyNyAyNS4xNDI2TDMxLjc1MzYgMzYuODQ3OEMzMS43MDEzIDM3LjQxNDcgMzEuMDA3NCAzNy44NTYzIDMwLjE2OTEgMzcuODU2M0gyOS45NzY4QzI5LjEzODUgMzcuODU2MyAyOC40NDQ2IDM3LjQxNDcgMjguMzkyMyAzNi44NDc4TDI3LjAwMzIgMjUuMTQyNkMyNi45NDYgMjQuNTIzNCAyNy42NzE5IDI0IDI4LjU4NzcgMjRaTTMwLjAxNzMgNDQuMzc5M0MzMS4zNzUgNDQuMzc5MyAzMi40NzU3IDQzLjI3ODcgMzIuNDc1NyA0MS45MjFDMzIuNDc1NyA0MC41NjMyIDMxLjM3NSAzOS40NjI2IDMwLjAxNzMgMzkuNDYyNkMyOC42NTk2IDM5LjQ2MjYgMjcuNTU5IDQwLjU2MzIgMjcuNTU5IDQxLjkyMUMyNy41NTkgNDMuMjc4NyAyOC42NTk2IDQ0LjM3OTMgMzAuMDE3MyA0NC4zNzkzWiIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iMC44IiAvPgogICAgPHBhdGggb3BhY2l0eT0iMC40IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTUxLjY2MDMgMTUuNzVIOC4zNDAzM1Y0OC4yNEM4LjM0MDMzIDUwLjc1ODQgMTAuMzgxOSA1Mi44IDEyLjkwMDMgNTIuOEg0Ny4xMDAzQzQ5LjYxODcgNTIuOCA1MS42NjAzIDUwLjc1ODQgNTEuNjYwMyA0OC4yNFYxNS43NVpNMzEuNTU4MiAyNEgyOC41ODc3QzI3LjY3MTkgMjQgMjYuOTQ2IDI0LjUyMzQgMjcuMDAzMiAyNS4xNDI2TDI4LjM5MjMgMzYuODQ3OEMyOC40NDQ2IDM3LjQxNDcgMjkuMTM4NSAzNy44NTYzIDI5Ljk3NjggMzcuODU2M0gzMC4xNjkxQzMxLjAwNzQgMzcuODU2MyAzMS43MDEzIDM3LjQxNDcgMzEuNzUzNiAzNi44NDc4TDMzLjE0MjcgMjUuMTQyNkMzMy4xOTk5IDI0LjUyMzQgMzIuNDc0IDI0IDMxLjU1ODIgMjRaTTMyLjQ3NTcgNDEuOTIxQzMyLjQ3NTcgNDMuMjc4NyAzMS4zNzUgNDQuMzc5MyAzMC4wMTczIDQ0LjM3OTNDMjguNjU5NiA0NC4zNzkzIDI3LjU1OSA0My4yNzg3IDI3LjU1OSA0MS45MjFDMjcuNTU5IDQwLjU2MzMgMjguNjU5NiAzOS40NjI2IDMwLjAxNzMgMzkuNDYyNkMzMS4zNzUgMzkuNDYyNiAzMi40NzU3IDQwLjU2MzMgMzIuNDc1NyA0MS45MjFaIiBmaWxsPSIjODE5OUI5IiAvPgogICAgPHBhdGggb3BhY2l0eT0iMC40IiBkPSJNNDAuMTY5OSA3LjE5OTk1SDQ3LjA5OTlDNDkuNjE4MyA3LjE5OTk1IDUxLjY1OTkgOS4yNDE1MyA1MS42NTk5IDExLjc2VjE1Ljc1SDQwLjE2OTlWNy4xOTk5NVoiIGZpbGw9IiM1NTcxOTEiIC8+Cjwvc3ZnPgo=" alt="" srcset=""><div class="stoptext" style="display: none;">已停止提取</div><div class="stoptext" style="display: none;">提取失败,请重新尝试</div><div class="stoptext" style="display: none;">未识别到文字,请重新尝试</div><button class="btn"><img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xMy4xNzg4IDQuNUMxMi4wNTUyIDIuODQwNjIgMTAuMTU1IDEuNzUgOCAxLjc1QzQuNTQ4MjIgMS43NSAxLjc1IDQuNTQ4MjIgMS43NSA4QzEuNzUgMTEuNDUxOCA0LjU0ODIyIDE0LjI1IDggMTQuMjVDOS45MzAyMiAxNC4yNSAxMS42NTYxIDEzLjM3NSAxMi44MDI1IDEyQzEzLjA2MDYgMTEuNjkwNiAxMy4yODkyIDExLjM1NTggMTMuNDg0MyAxMU0xMy4zNTE0IDEuODU5NjNMMTMuNzgxMSA0Ljg2ODAxQzEzLjc5MDYgNC45MzQgMTMuNzM0IDQuOTkwNTcgMTMuNjY4IDQuOTgxMTRMMTAuNjA5MSA0LjU0NDE2IiBzdHJva2U9IiMzMzMzMzMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIC8+Cjwvc3ZnPgo=" alt="" srcset=""><span class="btntext">重试</span></button></div></div></div></div></template></wps-ai-ocr></body><div id="immersive-translate-popup" style="all: initial"><template shadowrootmode="open"><style>@charset "UTF-8";
  1360. /*!
  1361. * Pico.css v1.5.6 (https://picocss.com)
  1362. * Copyright 2019-2022 - Licensed under MIT
  1363. */
  1364. /**
  1365. * Theme: default
  1366. */
  1367. #mount {
  1368. --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
  1369. "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
  1370. "Segoe UI Symbol", "Noto Color Emoji";
  1371. --line-height: 1.5;
  1372. --font-weight: 400;
  1373. --font-size: 16px;
  1374. --border-radius: 0.25rem;
  1375. --border-width: 1px;
  1376. --outline-width: 3px;
  1377. --spacing: 1rem;
  1378. --typography-spacing-vertical: 1.5rem;
  1379. --block-spacing-vertical: calc(var(--spacing) * 2);
  1380. --block-spacing-horizontal: var(--spacing);
  1381. --grid-spacing-vertical: 0;
  1382. --grid-spacing-horizontal: var(--spacing);
  1383. --form-element-spacing-vertical: 0.75rem;
  1384. --form-element-spacing-horizontal: 1rem;
  1385. --nav-element-spacing-vertical: 1rem;
  1386. --nav-element-spacing-horizontal: 0.5rem;
  1387. --nav-link-spacing-vertical: 0.5rem;
  1388. --nav-link-spacing-horizontal: 0.5rem;
  1389. --form-label-font-weight: var(--font-weight);
  1390. --transition: 0.2s ease-in-out;
  1391. --modal-overlay-backdrop-filter: blur(0.25rem);
  1392. }
  1393. @media (min-width: 576px) {
  1394. #mount {
  1395. --font-size: 17px;
  1396. }
  1397. }
  1398. @media (min-width: 768px) {
  1399. #mount {
  1400. --font-size: 18px;
  1401. }
  1402. }
  1403. @media (min-width: 992px) {
  1404. #mount {
  1405. --font-size: 19px;
  1406. }
  1407. }
  1408. @media (min-width: 1200px) {
  1409. #mount {
  1410. --font-size: 20px;
  1411. }
  1412. }
  1413. @media (min-width: 576px) {
  1414. #mount > header,
  1415. #mount > main,
  1416. #mount > footer,
  1417. section {
  1418. --block-spacing-vertical: calc(var(--spacing) * 2.5);
  1419. }
  1420. }
  1421. @media (min-width: 768px) {
  1422. #mount > header,
  1423. #mount > main,
  1424. #mount > footer,
  1425. section {
  1426. --block-spacing-vertical: calc(var(--spacing) * 3);
  1427. }
  1428. }
  1429. @media (min-width: 992px) {
  1430. #mount > header,
  1431. #mount > main,
  1432. #mount > footer,
  1433. section {
  1434. --block-spacing-vertical: calc(var(--spacing) * 3.5);
  1435. }
  1436. }
  1437. @media (min-width: 1200px) {
  1438. #mount > header,
  1439. #mount > main,
  1440. #mount > footer,
  1441. section {
  1442. --block-spacing-vertical: calc(var(--spacing) * 4);
  1443. }
  1444. }
  1445. @media (min-width: 576px) {
  1446. article {
  1447. --block-spacing-horizontal: calc(var(--spacing) * 1.25);
  1448. }
  1449. }
  1450. @media (min-width: 768px) {
  1451. article {
  1452. --block-spacing-horizontal: calc(var(--spacing) * 1.5);
  1453. }
  1454. }
  1455. @media (min-width: 992px) {
  1456. article {
  1457. --block-spacing-horizontal: calc(var(--spacing) * 1.75);
  1458. }
  1459. }
  1460. @media (min-width: 1200px) {
  1461. article {
  1462. --block-spacing-horizontal: calc(var(--spacing) * 2);
  1463. }
  1464. }
  1465. dialog > article {
  1466. --block-spacing-vertical: calc(var(--spacing) * 2);
  1467. --block-spacing-horizontal: var(--spacing);
  1468. }
  1469. @media (min-width: 576px) {
  1470. dialog > article {
  1471. --block-spacing-vertical: calc(var(--spacing) * 2.5);
  1472. --block-spacing-horizontal: calc(var(--spacing) * 1.25);
  1473. }
  1474. }
  1475. @media (min-width: 768px) {
  1476. dialog > article {
  1477. --block-spacing-vertical: calc(var(--spacing) * 3);
  1478. --block-spacing-horizontal: calc(var(--spacing) * 1.5);
  1479. }
  1480. }
  1481. a {
  1482. --text-decoration: none;
  1483. }
  1484. a.secondary,
  1485. a.contrast {
  1486. --text-decoration: underline;
  1487. }
  1488. small {
  1489. --font-size: 0.875em;
  1490. }
  1491. h1,
  1492. h2,
  1493. h3,
  1494. h4,
  1495. h5,
  1496. h6 {
  1497. --font-weight: 700;
  1498. }
  1499. h1 {
  1500. --font-size: 2rem;
  1501. --typography-spacing-vertical: 3rem;
  1502. }
  1503. h2 {
  1504. --font-size: 1.75rem;
  1505. --typography-spacing-vertical: 2.625rem;
  1506. }
  1507. h3 {
  1508. --font-size: 1.5rem;
  1509. --typography-spacing-vertical: 2.25rem;
  1510. }
  1511. h4 {
  1512. --font-size: 1.25rem;
  1513. --typography-spacing-vertical: 1.874rem;
  1514. }
  1515. h5 {
  1516. --font-size: 1.125rem;
  1517. --typography-spacing-vertical: 1.6875rem;
  1518. }
  1519. [type="checkbox"],
  1520. [type="radio"] {
  1521. --border-width: 2px;
  1522. }
  1523. [type="checkbox"][role="switch"] {
  1524. --border-width: 3px;
  1525. }
  1526. thead th,
  1527. thead td,
  1528. tfoot th,
  1529. tfoot td {
  1530. --border-width: 3px;
  1531. }
  1532. :not(thead, tfoot) > * > td {
  1533. --font-size: 0.875em;
  1534. }
  1535. pre,
  1536. code,
  1537. kbd,
  1538. samp {
  1539. --font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace",
  1540. "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace,
  1541. "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  1542. }
  1543. kbd {
  1544. --font-weight: bolder;
  1545. }
  1546. [data-theme="light"],
  1547. #mount:not([data-theme="dark"]) {
  1548. --background-color: #fff;
  1549. --background-light-green: #F5F7F9;
  1550. --color: hsl(205deg, 20%, 32%);
  1551. --h1-color: hsl(205deg, 30%, 15%);
  1552. --h2-color: #24333e;
  1553. --h3-color: hsl(205deg, 25%, 23%);
  1554. --h4-color: #374956;
  1555. --h5-color: hsl(205deg, 20%, 32%);
  1556. --h6-color: #4d606d;
  1557. --muted-color: hsl(205deg, 10%, 50%);
  1558. --muted-border-color: hsl(205deg, 20%, 94%);
  1559. --primary: hsl(195deg, 85%, 41%);
  1560. --primary-hover: hsl(195deg, 90%, 32%);
  1561. --primary-focus: rgba(16, 149, 193, 0.125);
  1562. --primary-inverse: #fff;
  1563. --secondary: hsl(205deg, 15%, 41%);
  1564. --secondary-hover: hsl(205deg, 20%, 32%);
  1565. --secondary-focus: rgba(89, 107, 120, 0.125);
  1566. --secondary-inverse: #fff;
  1567. --contrast: hsl(205deg, 30%, 15%);
  1568. --contrast-hover: #000;
  1569. --contrast-focus: rgba(89, 107, 120, 0.125);
  1570. --contrast-inverse: #fff;
  1571. --mark-background-color: #fff2ca;
  1572. --mark-color: #543a26;
  1573. --ins-color: #388e3c;
  1574. --del-color: #c62828;
  1575. --blockquote-border-color: var(--muted-border-color);
  1576. --blockquote-footer-color: var(--muted-color);
  1577. --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  1578. --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  1579. --form-element-background-color: transparent;
  1580. --form-element-border-color: hsl(205deg, 14%, 68%);
  1581. --form-element-color: var(--color);
  1582. --form-element-placeholder-color: var(--muted-color);
  1583. --form-element-active-background-color: transparent;
  1584. --form-element-active-border-color: var(--primary);
  1585. --form-element-focus-color: var(--primary-focus);
  1586. --form-element-disabled-background-color: hsl(205deg, 18%, 86%);
  1587. --form-element-disabled-border-color: hsl(205deg, 14%, 68%);
  1588. --form-element-disabled-opacity: 0.5;
  1589. --form-element-invalid-border-color: #c62828;
  1590. --form-element-invalid-active-border-color: #d32f2f;
  1591. --form-element-invalid-focus-color: rgba(211, 47, 47, 0.125);
  1592. --form-element-valid-border-color: #388e3c;
  1593. --form-element-valid-active-border-color: #43a047;
  1594. --form-element-valid-focus-color: rgba(67, 160, 71, 0.125);
  1595. --switch-background-color: hsl(205deg, 16%, 77%);
  1596. --switch-color: var(--primary-inverse);
  1597. --switch-checked-background-color: var(--primary);
  1598. --range-border-color: hsl(205deg, 18%, 86%);
  1599. --range-active-border-color: hsl(205deg, 16%, 77%);
  1600. --range-thumb-border-color: var(--background-color);
  1601. --range-thumb-color: var(--secondary);
  1602. --range-thumb-hover-color: var(--secondary-hover);
  1603. --range-thumb-active-color: var(--primary);
  1604. --table-border-color: var(--muted-border-color);
  1605. --table-row-stripped-background-color: #f6f8f9;
  1606. --code-background-color: hsl(205deg, 20%, 94%);
  1607. --code-color: var(--muted-color);
  1608. --code-kbd-background-color: var(--contrast);
  1609. --code-kbd-color: var(--contrast-inverse);
  1610. --code-tag-color: hsl(330deg, 40%, 50%);
  1611. --code-property-color: hsl(185deg, 40%, 40%);
  1612. --code-value-color: hsl(40deg, 20%, 50%);
  1613. --code-comment-color: hsl(205deg, 14%, 68%);
  1614. --accordion-border-color: var(--muted-border-color);
  1615. --accordion-close-summary-color: var(--color);
  1616. --accordion-open-summary-color: var(--muted-color);
  1617. --card-background-color: var(--background-color);
  1618. --card-border-color: var(--muted-border-color);
  1619. --card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698),
  1620. 0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024),
  1621. 0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03),
  1622. 0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036),
  1623. 0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302),
  1624. 0.5rem 1rem 6rem rgba(27, 40, 50, 0.06),
  1625. 0 0 0 0.0625rem rgba(27, 40, 50, 0.015);
  1626. --card-sectionning-background-color: #fbfbfc;
  1627. --dropdown-background-color: #fbfbfc;
  1628. --dropdown-border-color: #e1e6eb;
  1629. --dropdown-box-shadow: var(--card-box-shadow);
  1630. --dropdown-color: var(--color);
  1631. --dropdown-hover-background-color: hsl(205deg, 20%, 94%);
  1632. --modal-overlay-background-color: rgba(213, 220, 226, 0.7);
  1633. --progress-background-color: hsl(205deg, 18%, 86%);
  1634. --progress-color: var(--primary);
  1635. --loading-spinner-opacity: 0.5;
  1636. --tooltip-background-color: var(--contrast);
  1637. --tooltip-color: var(--contrast-inverse);
  1638. --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  1639. --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  1640. --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  1641. --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  1642. --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
  1643. --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
  1644. --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(198, 40, 40)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
  1645. --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
  1646. --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  1647. --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
  1648. --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(56, 142, 60)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  1649. --icon-share: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0nMjQnIGhlaWdodD0nMjQnIHZpZXdCb3g9JzAgMCAyNCAyNCcgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTguOTM0OCA4LjY0ODQ0QzIwLjg5NDEgOC42NDg0NCAyMi40ODU1IDcuMDU0NjkgMjIuNDg1NSA1LjA5NzY2QzIyLjQ4NTUgMy4xNDA2MiAyMC44OTE4IDEuNTQ2ODggMTguOTM0OCAxLjU0Njg4QzE2Ljk3NTQgMS41NDY4OCAxNS4zODQgMy4xNDA2MiAxNS4zODQgNS4wOTc2NkMxNS4zODQgNS4yOTkyMiAxNS40MDA0IDUuNDkzNzUgMTUuNDMzMiA1LjY4NTk0TDcuMzIzODMgOS4zNTM5MUM2LjcwOTc3IDguODQ1MzEgNS45MjIyNyA4LjU0MDYyIDUuMDY0NDUgOC41NDA2MkMzLjEwNTA4IDguNTQwNjIgMS41MTM2NyAxMC4xMzQ0IDEuNTEzNjcgMTIuMDkxNEMxLjUxMzY3IDE0LjA0ODQgMy4xMDc0MiAxNS42NDIyIDUuMDY0NDUgMTUuNjQyMkM1LjgzMzIgMTUuNjQyMiA2LjU0NTcgMTUuMzk2MSA3LjEyNjk1IDE0Ljk4MTNMMTIuNDk0MSAxNy45OTUzQzEyLjQxNjggMTguMjg1OSAxMi4zNzcgMTguNTg4MyAxMi4zNzcgMTguOTAyM0MxMi4zNzcgMjAuODYxNyAxMy45NzA3IDIyLjQ1MzEgMTUuOTI3NyAyMi40NTMxQzE3Ljg4NzEgMjIuNDUzMSAxOS40Nzg1IDIwLjg1OTQgMTkuNDc4NSAxOC45MDIzQzE5LjQ3ODUgMTYuOTQzIDE3Ljg4NDggMTUuMzUxNiAxNS45Mjc3IDE1LjM1MTZDMTQuOTU3NCAxNS4zNTE2IDE0LjA3ODUgMTUuNzQzIDEzLjQzNjMgMTYuMzczNEw4LjMyMjI3IDEzLjUwNDdDOC41MDk3NyAxMy4wNzExIDguNjE1MjMgMTIuNTk1MyA4LjYxNTIzIDEyLjA5MzhDOC42MTUyMyAxMS42ODEyIDguNTQ0OTIgMTEuMjg3NSA4LjQxNjAyIDEwLjkxOTVMMTYuMjIzIDcuMzg3NUMxNi44NzQ2IDguMTU2MjUgMTcuODQ5NiA4LjY0ODQ0IDE4LjkzNDggOC42NDg0NFpNNS4wNjQ0NSAxMy43Njk1QzQuMTQxMDIgMTMuNzY5NSAzLjM4ODY3IDEzLjAxNzIgMy4zODg2NyAxMi4wOTM4QzMuMzg4NjcgMTEuMTcwMyA0LjE0MTAyIDEwLjQxOCA1LjA2NDQ1IDEwLjQxOEM1Ljk4Nzg5IDEwLjQxOCA2Ljc0MDIzIDExLjE3MDMgNi43NDAyMyAxMi4wOTM4QzYuNzQwMjMgMTMuMDE3MiA1Ljk4Nzg5IDEzLjc2OTUgNS4wNjQ0NSAxMy43Njk1Wk0xNS45Mjc3IDE3LjIyNjZDMTYuODUxMiAxNy4yMjY2IDE3LjYwMzUgMTcuOTc4OSAxNy42MDM1IDE4LjkwMjNDMTcuNjAzNSAxOS44MjU4IDE2Ljg1MTIgMjAuNTc4MSAxNS45Mjc3IDIwLjU3ODFDMTUuMDA0MyAyMC41NzgxIDE0LjI1MiAxOS44MjU4IDE0LjI1MiAxOC45MDIzQzE0LjI1MiAxNy45Nzg5IDE1LjAwMiAxNy4yMjY2IDE1LjkyNzcgMTcuMjI2NlpNMTguOTM0OCAzLjQxOTUzQzE5Ljg1ODIgMy40MTk1MyAyMC42MTA1IDQuMTcxODcgMjAuNjEwNSA1LjA5NTMxQzIwLjYxMDUgNi4wMTg3NSAxOS44NTgyIDYuNzcxMDkgMTguOTM0OCA2Ljc3MTA5QzE4LjAxMTMgNi43NzEwOSAxNy4yNTkgNi4wMTg3NSAxNy4yNTkgNS4wOTUzMUMxNy4yNTkgNC4xNzE4NyAxOC4wMTEzIDMuNDE5NTMgMTguOTM0OCAzLjQxOTUzWicgZmlsbD0nIzgzODM4MycvPjwvc3ZnPiA=");
  1650. --float-ball-more-button-border-color: #F6F6F6;
  1651. --float-ball-more-button-background-color: #FFFFFF;
  1652. --float-ball-more-button-svg-color: #6C6F73;
  1653. color-scheme: light;
  1654. --service-bg-hover:#F7FAFF;
  1655. }
  1656. @media only screen and (prefers-color-scheme: dark) {
  1657. #mount:not([data-theme="light"]) {
  1658. --background-color: #11191f;
  1659. --float-ball-more-button-background-color: #FFFFFF;
  1660. --background-light-green: #141e26;
  1661. --color: hsl(205deg, 16%, 77%);
  1662. --h1-color: hsl(205deg, 20%, 94%);
  1663. --h2-color: #e1e6eb;
  1664. --h3-color: hsl(205deg, 18%, 86%);
  1665. --h4-color: #c8d1d8;
  1666. --h5-color: hsl(205deg, 16%, 77%);
  1667. --h6-color: #afbbc4;
  1668. --muted-color: hsl(205deg, 10%, 50%);
  1669. --muted-border-color: #1f2d38;
  1670. --primary: hsl(195deg, 85%, 41%);
  1671. --primary-hover: hsl(195deg, 80%, 50%);
  1672. --primary-focus: rgba(16, 149, 193, 0.25);
  1673. --primary-inverse: #fff;
  1674. --secondary: hsl(205deg, 15%, 41%);
  1675. --secondary-hover: hsl(205deg, 10%, 50%);
  1676. --secondary-focus: rgba(115, 130, 140, 0.25);
  1677. --secondary-inverse: #fff;
  1678. --contrast: hsl(205deg, 20%, 94%);
  1679. --contrast-hover: #fff;
  1680. --contrast-focus: rgba(115, 130, 140, 0.25);
  1681. --contrast-inverse: #000;
  1682. --mark-background-color: #d1c284;
  1683. --mark-color: #11191f;
  1684. --ins-color: #388e3c;
  1685. --del-color: #c62828;
  1686. --blockquote-border-color: var(--muted-border-color);
  1687. --blockquote-footer-color: var(--muted-color);
  1688. --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  1689. --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  1690. --form-element-background-color: #11191f;
  1691. --form-element-border-color: #374956;
  1692. --form-element-color: var(--color);
  1693. --form-element-placeholder-color: var(--muted-color);
  1694. --form-element-active-background-color: var(
  1695. --form-element-background-color
  1696. );
  1697. --form-element-active-border-color: var(--primary);
  1698. --form-element-focus-color: var(--primary-focus);
  1699. --form-element-disabled-background-color: hsl(205deg, 25%, 23%);
  1700. --form-element-disabled-border-color: hsl(205deg, 20%, 32%);
  1701. --form-element-disabled-opacity: 0.5;
  1702. --form-element-invalid-border-color: #b71c1c;
  1703. --form-element-invalid-active-border-color: #c62828;
  1704. --form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);
  1705. --form-element-valid-border-color: #2e7d32;
  1706. --form-element-valid-active-border-color: #388e3c;
  1707. --form-element-valid-focus-color: rgba(56, 142, 60, 0.25);
  1708. --switch-background-color: #374956;
  1709. --switch-color: var(--primary-inverse);
  1710. --switch-checked-background-color: var(--primary);
  1711. --range-border-color: #24333e;
  1712. --range-active-border-color: hsl(205deg, 25%, 23%);
  1713. --range-thumb-border-color: var(--background-color);
  1714. --range-thumb-color: var(--secondary);
  1715. --range-thumb-hover-color: var(--secondary-hover);
  1716. --range-thumb-active-color: var(--primary);
  1717. --table-border-color: var(--muted-border-color);
  1718. --table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
  1719. --code-background-color: #18232c;
  1720. --code-color: var(--muted-color);
  1721. --code-kbd-background-color: var(--contrast);
  1722. --code-kbd-color: var(--contrast-inverse);
  1723. --code-tag-color: hsl(330deg, 30%, 50%);
  1724. --code-property-color: hsl(185deg, 30%, 50%);
  1725. --code-value-color: hsl(40deg, 10%, 50%);
  1726. --code-comment-color: #4d606d;
  1727. --accordion-border-color: var(--muted-border-color);
  1728. --accordion-active-summary-color: var(--primary);
  1729. --accordion-close-summary-color: var(--color);
  1730. --accordion-open-summary-color: var(--muted-color);
  1731. --card-background-color: #141e26;
  1732. --card-border-color: var(--card-background-color);
  1733. --card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
  1734. 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
  1735. 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
  1736. 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
  1737. 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302),
  1738. 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
  1739. --card-sectionning-background-color: #18232c;
  1740. --dropdown-background-color: hsl(205deg, 30%, 15%);
  1741. --dropdown-border-color: #24333e;
  1742. --dropdown-box-shadow: var(--card-box-shadow);
  1743. --dropdown-color: var(--color);
  1744. --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
  1745. --modal-overlay-background-color: rgba(36, 51, 62, 0.8);
  1746. --progress-background-color: #24333e;
  1747. --progress-color: var(--primary);
  1748. --loading-spinner-opacity: 0.5;
  1749. --tooltip-background-color: var(--contrast);
  1750. --tooltip-color: var(--contrast-inverse);
  1751. --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  1752. --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  1753. --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  1754. --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  1755. --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
  1756. --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
  1757. --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 28, 28)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
  1758. --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
  1759. --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  1760. --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
  1761. --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  1762. --icon-share: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0nMjInIGhlaWdodD0nMjInIHZpZXdCb3g9JzAgMCAyMiAyMicgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTcuOTM0OCA3LjY0ODQ0QzE5Ljg5NDEgNy42NDg0NCAyMS40ODU1IDYuMDU0NjkgMjEuNDg1NSA0LjA5NzY2QzIxLjQ4NTUgMi4xNDA2MiAxOS44OTE4IDAuNTQ2ODc1IDE3LjkzNDggMC41NDY4NzVDMTUuOTc1NCAwLjU0Njg3NSAxNC4zODQgMi4xNDA2MiAxNC4zODQgNC4wOTc2NkMxNC4zODQgNC4yOTkyMiAxNC40MDA0IDQuNDkzNzUgMTQuNDMzMiA0LjY4NTk0TDYuMzIzODMgOC4zNTM5MUM1LjcwOTc3IDcuODQ1MzEgNC45MjIyNyA3LjU0MDYyIDQuMDY0NDUgNy41NDA2MkMyLjEwNTA4IDcuNTQwNjIgMC41MTM2NzIgOS4xMzQzOCAwLjUxMzY3MiAxMS4wOTE0QzAuNTEzNjcyIDEzLjA0ODQgMi4xMDc0MiAxNC42NDIyIDQuMDY0NDUgMTQuNjQyMkM0LjgzMzIgMTQuNjQyMiA1LjU0NTcgMTQuMzk2MSA2LjEyNjk1IDEzLjk4MTNMMTEuNDk0MSAxNi45OTUzQzExLjQxNjggMTcuMjg1OSAxMS4zNzcgMTcuNTg4MyAxMS4zNzcgMTcuOTAyM0MxMS4zNzcgMTkuODYxNyAxMi45NzA3IDIxLjQ1MzEgMTQuOTI3NyAyMS40NTMxQzE2Ljg4NzEgMjEuNDUzMSAxOC40Nzg1IDE5Ljg1OTQgMTguNDc4NSAxNy45MDIzQzE4LjQ3ODUgMTUuOTQzIDE2Ljg4NDggMTQuMzUxNiAxNC45Mjc3IDE0LjM1MTZDMTMuOTU3NCAxNC4zNTE2IDEzLjA3ODUgMTQuNzQzIDEyLjQzNjMgMTUuMzczNEw3LjMyMjI3IDEyLjUwNDdDNy41MDk3NyAxMi4wNzExIDcuNjE1MjMgMTEuNTk1MyA3LjYxNTIzIDExLjA5MzhDNy42MTUyMyAxMC42ODEyIDcuNTQ0OTIgMTAuMjg3NSA3LjQxNjAyIDkuOTE5NTNMMTUuMjIzIDYuMzg3NUMxNS44NzQ2IDcuMTU2MjUgMTYuODQ5NiA3LjY0ODQ0IDE3LjkzNDggNy42NDg0NFpNNC4wNjQ0NSAxMi43Njk1QzMuMTQxMDIgMTIuNzY5NSAyLjM4ODY3IDEyLjAxNzIgMi4zODg2NyAxMS4wOTM4QzIuMzg4NjcgMTAuMTcwMyAzLjE0MTAyIDkuNDE3OTcgNC4wNjQ0NSA5LjQxNzk3QzQuOTg3ODkgOS40MTc5NyA1Ljc0MDIzIDEwLjE3MDMgNS43NDAyMyAxMS4wOTM4QzUuNzQwMjMgMTIuMDE3MiA0Ljk4Nzg5IDEyLjc2OTUgNC4wNjQ0NSAxMi43Njk1Wk0xNC45Mjc3IDE2LjIyNjZDMTUuODUxMiAxNi4yMjY2IDE2LjYwMzUgMTYuOTc4OSAxNi42MDM1IDE3LjkwMjNDMTYuNjAzNSAxOC44MjU4IDE1Ljg1MTIgMTkuNTc4MSAxNC45Mjc3IDE5LjU3ODFDMTQuMDA0MyAxOS41NzgxIDEzLjI1MiAxOC44MjU4IDEzLjI1MiAxNy45MDIzQzEzLjI1MiAxNi45Nzg5IDE0LjAwMiAxNi4yMjY2IDE0LjkyNzcgMTYuMjI2NlpNMTcuOTM0OCAyLjQxOTUzQzE4Ljg1ODIgMi40MTk1MyAxOS42MTA1IDMuMTcxODcgMTkuNjEwNSA0LjA5NTMxQzE5LjYxMDUgNS4wMTg3NSAxOC44NTgyIDUuNzcxMDkgMTcuOTM0OCA1Ljc3MTA5QzE3LjAxMTMgNS43NzEwOSAxNi4yNTkgNS4wMTg3NSAxNi4yNTkgNC4wOTUzMUMxNi4yNTkgMy4xNzE4NyAxNy4wMTEzIDIuNDE5NTMgMTcuOTM0OCAyLjQxOTUzWicgZmlsbD0nI0I2QjZCNicvPjwvc3ZnPiA=");
  1763. color-scheme: dark;
  1764. --service-bg-hover:#22292F;
  1765. }
  1766. }
  1767. [data-theme="dark"] {
  1768. --background-color: #11191f;
  1769. --float-ball-more-button-background-color: #FFFFFF;
  1770. --background-light-green: #141e26;
  1771. --color: hsl(205deg, 16%, 77%);
  1772. --h1-color: hsl(205deg, 20%, 94%);
  1773. --h2-color: #e1e6eb;
  1774. --h3-color: hsl(205deg, 18%, 86%);
  1775. --h4-color: #c8d1d8;
  1776. --h5-color: hsl(205deg, 16%, 77%);
  1777. --h6-color: #afbbc4;
  1778. --muted-color: hsl(205deg, 10%, 50%);
  1779. --muted-border-color: #1f2d38;
  1780. --primary: hsl(195deg, 85%, 41%);
  1781. --primary-hover: hsl(195deg, 80%, 50%);
  1782. --primary-focus: rgba(16, 149, 193, 0.25);
  1783. --primary-inverse: #fff;
  1784. --secondary: hsl(205deg, 15%, 41%);
  1785. --secondary-hover: hsl(205deg, 10%, 50%);
  1786. --secondary-focus: rgba(115, 130, 140, 0.25);
  1787. --secondary-inverse: #fff;
  1788. --contrast: hsl(205deg, 20%, 94%);
  1789. --contrast-hover: #fff;
  1790. --contrast-focus: rgba(115, 130, 140, 0.25);
  1791. --contrast-inverse: #000;
  1792. --mark-background-color: #d1c284;
  1793. --mark-color: #11191f;
  1794. --ins-color: #388e3c;
  1795. --del-color: #c62828;
  1796. --blockquote-border-color: var(--muted-border-color);
  1797. --blockquote-footer-color: var(--muted-color);
  1798. --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  1799. --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  1800. --form-element-background-color: #11191f;
  1801. --form-element-border-color: #374956;
  1802. --form-element-color: var(--color);
  1803. --form-element-placeholder-color: var(--muted-color);
  1804. --form-element-active-background-color: var(--form-element-background-color);
  1805. --form-element-active-border-color: var(--primary);
  1806. --form-element-focus-color: var(--primary-focus);
  1807. --form-element-disabled-background-color: hsl(205deg, 25%, 23%);
  1808. --form-element-disabled-border-color: hsl(205deg, 20%, 32%);
  1809. --form-element-disabled-opacity: 0.5;
  1810. --form-element-invalid-border-color: #b71c1c;
  1811. --form-element-invalid-active-border-color: #c62828;
  1812. --form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);
  1813. --form-element-valid-border-color: #2e7d32;
  1814. --form-element-valid-active-border-color: #388e3c;
  1815. --form-element-valid-focus-color: rgba(56, 142, 60, 0.25);
  1816. --switch-background-color: #374956;
  1817. --switch-color: var(--primary-inverse);
  1818. --switch-checked-background-color: var(--primary);
  1819. --range-border-color: #24333e;
  1820. --range-active-border-color: hsl(205deg, 25%, 23%);
  1821. --range-thumb-border-color: var(--background-color);
  1822. --range-thumb-color: var(--secondary);
  1823. --range-thumb-hover-color: var(--secondary-hover);
  1824. --range-thumb-active-color: var(--primary);
  1825. --table-border-color: var(--muted-border-color);
  1826. --table-row-stripped-background-color: rgba(115, 130, 140, 0.05);
  1827. --code-background-color: #18232c;
  1828. --code-color: var(--muted-color);
  1829. --code-kbd-background-color: var(--contrast);
  1830. --code-kbd-color: var(--contrast-inverse);
  1831. --code-tag-color: hsl(330deg, 30%, 50%);
  1832. --code-property-color: hsl(185deg, 30%, 50%);
  1833. --code-value-color: hsl(40deg, 10%, 50%);
  1834. --code-comment-color: #4d606d;
  1835. --accordion-border-color: var(--muted-border-color);
  1836. --accordion-active-summary-color: var(--primary);
  1837. --accordion-close-summary-color: var(--color);
  1838. --accordion-open-summary-color: var(--muted-color);
  1839. --card-background-color: #141e26;
  1840. --card-border-color: var(--card-background-color);
  1841. --card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),
  1842. 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),
  1843. 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),
  1844. 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),
  1845. 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302),
  1846. 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);
  1847. --card-sectionning-background-color: #18232c;
  1848. --dropdown-background-color: hsl(205deg, 30%, 15%);
  1849. --dropdown-border-color: #24333e;
  1850. --dropdown-box-shadow: var(--card-box-shadow);
  1851. --dropdown-color: var(--color);
  1852. --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
  1853. --modal-overlay-background-color: rgba(36, 51, 62, 0.8);
  1854. --progress-background-color: #24333e;
  1855. --progress-color: var(--primary);
  1856. --loading-spinner-opacity: 0.5;
  1857. --tooltip-background-color: var(--contrast);
  1858. --tooltip-color: var(--contrast-inverse);
  1859. --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  1860. --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  1861. --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  1862. --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  1863. --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
  1864. --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
  1865. --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 28, 28)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
  1866. --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
  1867. --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  1868. --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
  1869. --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  1870. --icon-share: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0nMjInIGhlaWdodD0nMjInIHZpZXdCb3g9JzAgMCAyMiAyMicgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTcuOTM0OCA3LjY0ODQ0QzE5Ljg5NDEgNy42NDg0NCAyMS40ODU1IDYuMDU0NjkgMjEuNDg1NSA0LjA5NzY2QzIxLjQ4NTUgMi4xNDA2MiAxOS44OTE4IDAuNTQ2ODc1IDE3LjkzNDggMC41NDY4NzVDMTUuOTc1NCAwLjU0Njg3NSAxNC4zODQgMi4xNDA2MiAxNC4zODQgNC4wOTc2NkMxNC4zODQgNC4yOTkyMiAxNC40MDA0IDQuNDkzNzUgMTQuNDMzMiA0LjY4NTk0TDYuMzIzODMgOC4zNTM5MUM1LjcwOTc3IDcuODQ1MzEgNC45MjIyNyA3LjU0MDYyIDQuMDY0NDUgNy41NDA2MkMyLjEwNTA4IDcuNTQwNjIgMC41MTM2NzIgOS4xMzQzOCAwLjUxMzY3MiAxMS4wOTE0QzAuNTEzNjcyIDEzLjA0ODQgMi4xMDc0MiAxNC42NDIyIDQuMDY0NDUgMTQuNjQyMkM0LjgzMzIgMTQuNjQyMiA1LjU0NTcgMTQuMzk2MSA2LjEyNjk1IDEzLjk4MTNMMTEuNDk0MSAxNi45OTUzQzExLjQxNjggMTcuMjg1OSAxMS4zNzcgMTcuNTg4MyAxMS4zNzcgMTcuOTAyM0MxMS4zNzcgMTkuODYxNyAxMi45NzA3IDIxLjQ1MzEgMTQuOTI3NyAyMS40NTMxQzE2Ljg4NzEgMjEuNDUzMSAxOC40Nzg1IDE5Ljg1OTQgMTguNDc4NSAxNy45MDIzQzE4LjQ3ODUgMTUuOTQzIDE2Ljg4NDggMTQuMzUxNiAxNC45Mjc3IDE0LjM1MTZDMTMuOTU3NCAxNC4zNTE2IDEzLjA3ODUgMTQuNzQzIDEyLjQzNjMgMTUuMzczNEw3LjMyMjI3IDEyLjUwNDdDNy41MDk3NyAxMi4wNzExIDcuNjE1MjMgMTEuNTk1MyA3LjYxNTIzIDExLjA5MzhDNy42MTUyMyAxMC42ODEyIDcuNTQ0OTIgMTAuMjg3NSA3LjQxNjAyIDkuOTE5NTNMMTUuMjIzIDYuMzg3NUMxNS44NzQ2IDcuMTU2MjUgMTYuODQ5NiA3LjY0ODQ0IDE3LjkzNDggNy42NDg0NFpNNC4wNjQ0NSAxMi43Njk1QzMuMTQxMDIgMTIuNzY5NSAyLjM4ODY3IDEyLjAxNzIgMi4zODg2NyAxMS4wOTM4QzIuMzg4NjcgMTAuMTcwMyAzLjE0MTAyIDkuNDE3OTcgNC4wNjQ0NSA5LjQxNzk3QzQuOTg3ODkgOS40MTc5NyA1Ljc0MDIzIDEwLjE3MDMgNS43NDAyMyAxMS4wOTM4QzUuNzQwMjMgMTIuMDE3MiA0Ljk4Nzg5IDEyLjc2OTUgNC4wNjQ0NSAxMi43Njk1Wk0xNC45Mjc3IDE2LjIyNjZDMTUuODUxMiAxNi4yMjY2IDE2LjYwMzUgMTYuOTc4OSAxNi42MDM1IDE3LjkwMjNDMTYuNjAzNSAxOC44MjU4IDE1Ljg1MTIgMTkuNTc4MSAxNC45Mjc3IDE5LjU3ODFDMTQuMDA0MyAxOS41NzgxIDEzLjI1MiAxOC44MjU4IDEzLjI1MiAxNy45MDIzQzEzLjI1MiAxNi45Nzg5IDE0LjAwMiAxNi4yMjY2IDE0LjkyNzcgMTYuMjI2NlpNMTcuOTM0OCAyLjQxOTUzQzE4Ljg1ODIgMi40MTk1MyAxOS42MTA1IDMuMTcxODcgMTkuNjEwNSA0LjA5NTMxQzE5LjYxMDUgNS4wMTg3NSAxOC44NTgyIDUuNzcxMDkgMTcuOTM0OCA1Ljc3MTA5QzE3LjAxMTMgNS43NzEwOSAxNi4yNTkgNS4wMTg3NSAxNi4yNTkgNC4wOTUzMUMxNi4yNTkgMy4xNzE4NyAxNy4wMTEzIDIuNDE5NTMgMTcuOTM0OCAyLjQxOTUzWicgZmlsbD0nI0I2QjZCNicvPjwvc3ZnPiA=");
  1871. color-scheme: dark;
  1872. }
  1873. progress,
  1874. [type="checkbox"],
  1875. [type="radio"],
  1876. [type="range"] {
  1877. accent-color: var(--primary);
  1878. }
  1879. /**
  1880. * Document
  1881. * Content-box & Responsive typography
  1882. */
  1883. *,
  1884. *::before,
  1885. *::after {
  1886. box-sizing: border-box;
  1887. background-repeat: no-repeat;
  1888. }
  1889. ::before,
  1890. ::after {
  1891. text-decoration: inherit;
  1892. vertical-align: inherit;
  1893. }
  1894. :where(#mount) {
  1895. -webkit-tap-highlight-color: transparent;
  1896. -webkit-text-size-adjust: 100%;
  1897. -moz-text-size-adjust: 100%;
  1898. text-size-adjust: 100%;
  1899. background-color: var(--background-color);
  1900. color: var(--color);
  1901. font-weight: var(--font-weight);
  1902. font-size: var(--font-size);
  1903. line-height: var(--line-height);
  1904. font-family: var(--font-family);
  1905. text-rendering: optimizeLegibility;
  1906. overflow-wrap: break-word;
  1907. cursor: default;
  1908. -moz-tab-size: 4;
  1909. -o-tab-size: 4;
  1910. tab-size: 4;
  1911. }
  1912. /**
  1913. * Sectioning
  1914. * Container and responsive spacings for header, main, footer
  1915. */
  1916. main {
  1917. display: block;
  1918. }
  1919. #mount {
  1920. width: 100%;
  1921. margin: 0;
  1922. }
  1923. #mount > header,
  1924. #mount > main,
  1925. #mount > footer {
  1926. width: 100%;
  1927. margin-right: auto;
  1928. margin-left: auto;
  1929. padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
  1930. }
  1931. @media (min-width: 576px) {
  1932. #mount > header,
  1933. #mount > main,
  1934. #mount > footer {
  1935. max-width: 510px;
  1936. padding-right: 0;
  1937. padding-left: 0;
  1938. }
  1939. }
  1940. @media (min-width: 768px) {
  1941. #mount > header,
  1942. #mount > main,
  1943. #mount > footer {
  1944. max-width: 700px;
  1945. }
  1946. }
  1947. @media (min-width: 992px) {
  1948. #mount > header,
  1949. #mount > main,
  1950. #mount > footer {
  1951. max-width: 920px;
  1952. }
  1953. }
  1954. @media (min-width: 1200px) {
  1955. #mount > header,
  1956. #mount > main,
  1957. #mount > footer {
  1958. max-width: 1130px;
  1959. }
  1960. }
  1961. /**
  1962. * Container
  1963. */
  1964. .container,
  1965. .container-fluid {
  1966. width: 100%;
  1967. margin-right: auto;
  1968. margin-left: auto;
  1969. padding-right: var(--spacing);
  1970. padding-left: var(--spacing);
  1971. }
  1972. @media (min-width: 576px) {
  1973. .container {
  1974. max-width: 510px;
  1975. padding-right: 0;
  1976. padding-left: 0;
  1977. }
  1978. }
  1979. @media (min-width: 768px) {
  1980. .container {
  1981. max-width: 700px;
  1982. }
  1983. }
  1984. @media (min-width: 992px) {
  1985. .container {
  1986. max-width: 920px;
  1987. }
  1988. }
  1989. @media (min-width: 1200px) {
  1990. .container {
  1991. max-width: 1130px;
  1992. }
  1993. }
  1994. /**
  1995. * Section
  1996. * Responsive spacings for section
  1997. */
  1998. section {
  1999. margin-bottom: var(--block-spacing-vertical);
  2000. }
  2001. /**
  2002. * Grid
  2003. * Minimal grid system with auto-layout columns
  2004. */
  2005. .grid {
  2006. grid-column-gap: var(--grid-spacing-horizontal);
  2007. grid-row-gap: var(--grid-spacing-vertical);
  2008. display: grid;
  2009. grid-template-columns: 1fr;
  2010. margin: 0;
  2011. }
  2012. @media (min-width: 992px) {
  2013. .grid {
  2014. grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
  2015. }
  2016. }
  2017. .grid > * {
  2018. min-width: 0;
  2019. }
  2020. /**
  2021. * Horizontal scroller (<figure>)
  2022. */
  2023. figure {
  2024. display: block;
  2025. margin: 0;
  2026. padding: 0;
  2027. overflow-x: auto;
  2028. }
  2029. figure figcaption {
  2030. padding: calc(var(--spacing) * 0.5) 0;
  2031. color: var(--muted-color);
  2032. }
  2033. /**
  2034. * Typography
  2035. */
  2036. b,
  2037. strong {
  2038. font-weight: bolder;
  2039. }
  2040. sub,
  2041. sup {
  2042. position: relative;
  2043. font-size: 0.75em;
  2044. line-height: 0;
  2045. vertical-align: baseline;
  2046. }
  2047. sub {
  2048. bottom: -0.25em;
  2049. }
  2050. sup {
  2051. top: -0.5em;
  2052. }
  2053. address,
  2054. blockquote,
  2055. dl,
  2056. figure,
  2057. form,
  2058. ol,
  2059. p,
  2060. pre,
  2061. table,
  2062. ul {
  2063. margin-top: 0;
  2064. margin-bottom: var(--typography-spacing-vertical);
  2065. color: var(--color);
  2066. font-style: normal;
  2067. font-weight: var(--font-weight);
  2068. font-size: var(--font-size);
  2069. }
  2070. a,
  2071. [role="link"] {
  2072. --color: var(--primary);
  2073. --background-color: transparent;
  2074. outline: none;
  2075. background-color: var(--background-color);
  2076. color: var(--color);
  2077. -webkit-text-decoration: var(--text-decoration);
  2078. text-decoration: var(--text-decoration);
  2079. transition: background-color var(--transition), color var(--transition),
  2080. box-shadow var(--transition), -webkit-text-decoration var(--transition);
  2081. transition: background-color var(--transition), color var(--transition),
  2082. text-decoration var(--transition), box-shadow var(--transition);
  2083. transition: background-color var(--transition), color var(--transition),
  2084. text-decoration var(--transition), box-shadow var(--transition),
  2085. -webkit-text-decoration var(--transition);
  2086. }
  2087. a:is([aria-current], :hover, :active, :focus),
  2088. [role="link"]:is([aria-current], :hover, :active, :focus) {
  2089. --color: var(--primary-hover);
  2090. --text-decoration: underline;
  2091. }
  2092. a:focus,
  2093. [role="link"]:focus {
  2094. --background-color: var(--primary-focus);
  2095. }
  2096. a.secondary,
  2097. [role="link"].secondary {
  2098. --color: var(--secondary);
  2099. }
  2100. a.secondary:is([aria-current], :hover, :active, :focus),
  2101. [role="link"].secondary:is([aria-current], :hover, :active, :focus) {
  2102. --color: var(--secondary-hover);
  2103. }
  2104. a.secondary:focus,
  2105. [role="link"].secondary:focus {
  2106. --background-color: var(--secondary-focus);
  2107. }
  2108. a.contrast,
  2109. [role="link"].contrast {
  2110. --color: var(--contrast);
  2111. }
  2112. a.contrast:is([aria-current], :hover, :active, :focus),
  2113. [role="link"].contrast:is([aria-current], :hover, :active, :focus) {
  2114. --color: var(--contrast-hover);
  2115. }
  2116. a.contrast:focus,
  2117. [role="link"].contrast:focus {
  2118. --background-color: var(--contrast-focus);
  2119. }
  2120. h1,
  2121. h2,
  2122. h3,
  2123. h4,
  2124. h5,
  2125. h6 {
  2126. margin-top: 0;
  2127. margin-bottom: var(--typography-spacing-vertical);
  2128. color: var(--color);
  2129. font-weight: var(--font-weight);
  2130. font-size: var(--font-size);
  2131. font-family: var(--font-family);
  2132. }
  2133. h1 {
  2134. --color: var(--h1-color);
  2135. }
  2136. h2 {
  2137. --color: var(--h2-color);
  2138. }
  2139. h3 {
  2140. --color: var(--h3-color);
  2141. }
  2142. h4 {
  2143. --color: var(--h4-color);
  2144. }
  2145. h5 {
  2146. --color: var(--h5-color);
  2147. }
  2148. h6 {
  2149. --color: var(--h6-color);
  2150. }
  2151. :where(address, blockquote, dl, figure, form, ol, p, pre, table, ul)
  2152. ~ :is(h1, h2, h3, h4, h5, h6) {
  2153. margin-top: var(--typography-spacing-vertical);
  2154. }
  2155. hgroup,
  2156. .headings {
  2157. margin-bottom: var(--typography-spacing-vertical);
  2158. }
  2159. hgroup > *,
  2160. .headings > * {
  2161. margin-bottom: 0;
  2162. }
  2163. hgroup > *:last-child,
  2164. .headings > *:last-child {
  2165. --color: var(--muted-color);
  2166. --font-weight: unset;
  2167. font-size: 1rem;
  2168. font-family: unset;
  2169. }
  2170. p {
  2171. margin-bottom: var(--typography-spacing-vertical);
  2172. }
  2173. small {
  2174. font-size: var(--font-size);
  2175. }
  2176. :where(dl, ol, ul) {
  2177. padding-right: 0;
  2178. padding-left: var(--spacing);
  2179. -webkit-padding-start: var(--spacing);
  2180. padding-inline-start: var(--spacing);
  2181. -webkit-padding-end: 0;
  2182. padding-inline-end: 0;
  2183. }
  2184. :where(dl, ol, ul) li {
  2185. margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
  2186. }
  2187. :where(dl, ol, ul) :is(dl, ol, ul) {
  2188. margin: 0;
  2189. margin-top: calc(var(--typography-spacing-vertical) * 0.25);
  2190. }
  2191. ul li {
  2192. list-style: square;
  2193. }
  2194. mark {
  2195. padding: 0.125rem 0.25rem;
  2196. background-color: var(--mark-background-color);
  2197. color: var(--mark-color);
  2198. vertical-align: baseline;
  2199. }
  2200. blockquote {
  2201. display: block;
  2202. margin: var(--typography-spacing-vertical) 0;
  2203. padding: var(--spacing);
  2204. border-right: none;
  2205. border-left: 0.25rem solid var(--blockquote-border-color);
  2206. -webkit-border-start: 0.25rem solid var(--blockquote-border-color);
  2207. border-inline-start: 0.25rem solid var(--blockquote-border-color);
  2208. -webkit-border-end: none;
  2209. border-inline-end: none;
  2210. }
  2211. blockquote footer {
  2212. margin-top: calc(var(--typography-spacing-vertical) * 0.5);
  2213. color: var(--blockquote-footer-color);
  2214. }
  2215. abbr[title] {
  2216. border-bottom: 1px dotted;
  2217. text-decoration: none;
  2218. cursor: help;
  2219. }
  2220. ins {
  2221. color: var(--ins-color);
  2222. text-decoration: none;
  2223. }
  2224. del {
  2225. color: var(--del-color);
  2226. }
  2227. ::-moz-selection {
  2228. background-color: var(--primary-focus);
  2229. }
  2230. ::selection {
  2231. background-color: var(--primary-focus);
  2232. }
  2233. /**
  2234. * Embedded content
  2235. */
  2236. :where(audio, canvas, iframe, img, svg, video) {
  2237. vertical-align: middle;
  2238. }
  2239. audio,
  2240. video {
  2241. display: inline-block;
  2242. }
  2243. audio:not([controls]) {
  2244. display: none;
  2245. height: 0;
  2246. }
  2247. :where(iframe) {
  2248. border-style: none;
  2249. }
  2250. img {
  2251. max-width: 100%;
  2252. height: auto;
  2253. border-style: none;
  2254. }
  2255. :where(svg:not([fill])) {
  2256. fill: currentColor;
  2257. }
  2258. svg:not(#mount) {
  2259. overflow: hidden;
  2260. }
  2261. /**
  2262. * Button
  2263. */
  2264. button {
  2265. margin: 0;
  2266. overflow: visible;
  2267. font-family: inherit;
  2268. text-transform: none;
  2269. }
  2270. button,
  2271. [type="button"],
  2272. [type="reset"],
  2273. [type="submit"] {
  2274. -webkit-appearance: button;
  2275. }
  2276. button {
  2277. display: block;
  2278. width: 100%;
  2279. margin-bottom: var(--spacing);
  2280. }
  2281. [role="button"] {
  2282. display: inline-block;
  2283. text-decoration: none;
  2284. }
  2285. button,
  2286. input[type="submit"],
  2287. input[type="button"],
  2288. input[type="reset"],
  2289. [role="button"] {
  2290. --background-color: var(--primary);
  2291. --border-color: var(--primary);
  2292. --color: var(--primary-inverse);
  2293. --box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
  2294. padding: var(--form-element-spacing-vertical)
  2295. var(--form-element-spacing-horizontal);
  2296. border: var(--border-width) solid var(--border-color);
  2297. border-radius: var(--border-radius);
  2298. outline: none;
  2299. background-color: var(--background-color);
  2300. box-shadow: var(--box-shadow);
  2301. color: var(--color);
  2302. font-weight: var(--font-weight);
  2303. font-size: 1rem;
  2304. line-height: var(--line-height);
  2305. text-align: center;
  2306. cursor: pointer;
  2307. transition: background-color var(--transition), border-color var(--transition),
  2308. color var(--transition), box-shadow var(--transition);
  2309. }
  2310. button:is([aria-current], :hover, :active, :focus),
  2311. input[type="submit"]:is([aria-current], :hover, :active, :focus),
  2312. input[type="button"]:is([aria-current], :hover, :active, :focus),
  2313. input[type="reset"]:is([aria-current], :hover, :active, :focus),
  2314. [role="button"]:is([aria-current], :hover, :active, :focus) {
  2315. --background-color: var(--primary-hover);
  2316. --border-color: var(--primary-hover);
  2317. --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
  2318. --color: var(--primary-inverse);
  2319. }
  2320. button:focus,
  2321. input[type="submit"]:focus,
  2322. input[type="button"]:focus,
  2323. input[type="reset"]:focus,
  2324. [role="button"]:focus {
  2325. --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
  2326. 0 0 0 var(--outline-width) var(--primary-focus);
  2327. }
  2328. :is(
  2329. button,
  2330. input[type="submit"],
  2331. input[type="button"],
  2332. [role="button"]
  2333. ).secondary,
  2334. input[type="reset"] {
  2335. --background-color: var(--secondary);
  2336. --border-color: var(--secondary);
  2337. --color: var(--secondary-inverse);
  2338. cursor: pointer;
  2339. }
  2340. :is(
  2341. button,
  2342. input[type="submit"],
  2343. input[type="button"],
  2344. [role="button"]
  2345. ).secondary:is([aria-current], :hover, :active, :focus),
  2346. input[type="reset"]:is([aria-current], :hover, :active, :focus) {
  2347. --background-color: var(--secondary-hover);
  2348. --border-color: var(--secondary-hover);
  2349. --color: var(--secondary-inverse);
  2350. }
  2351. :is(
  2352. button,
  2353. input[type="submit"],
  2354. input[type="button"],
  2355. [role="button"]
  2356. ).secondary:focus,
  2357. input[type="reset"]:focus {
  2358. --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
  2359. 0 0 0 var(--outline-width) var(--secondary-focus);
  2360. }
  2361. :is(
  2362. button,
  2363. input[type="submit"],
  2364. input[type="button"],
  2365. [role="button"]
  2366. ).contrast {
  2367. --background-color: var(--contrast);
  2368. --border-color: var(--contrast);
  2369. --color: var(--contrast-inverse);
  2370. }
  2371. :is(
  2372. button,
  2373. input[type="submit"],
  2374. input[type="button"],
  2375. [role="button"]
  2376. ).contrast:is([aria-current], :hover, :active, :focus) {
  2377. --background-color: var(--contrast-hover);
  2378. --border-color: var(--contrast-hover);
  2379. --color: var(--contrast-inverse);
  2380. }
  2381. :is(
  2382. button,
  2383. input[type="submit"],
  2384. input[type="button"],
  2385. [role="button"]
  2386. ).contrast:focus {
  2387. --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
  2388. 0 0 0 var(--outline-width) var(--contrast-focus);
  2389. }
  2390. :is(
  2391. button,
  2392. input[type="submit"],
  2393. input[type="button"],
  2394. [role="button"]
  2395. ).outline,
  2396. input[type="reset"].outline {
  2397. --background-color: transparent;
  2398. --color: var(--primary);
  2399. }
  2400. :is(
  2401. button,
  2402. input[type="submit"],
  2403. input[type="button"],
  2404. [role="button"]
  2405. ).outline:is([aria-current], :hover, :active, :focus),
  2406. input[type="reset"].outline:is([aria-current], :hover, :active, :focus) {
  2407. --background-color: transparent;
  2408. --color: var(--primary-hover);
  2409. }
  2410. :is(
  2411. button,
  2412. input[type="submit"],
  2413. input[type="button"],
  2414. [role="button"]
  2415. ).outline.secondary,
  2416. input[type="reset"].outline {
  2417. --color: var(--secondary);
  2418. }
  2419. :is(
  2420. button,
  2421. input[type="submit"],
  2422. input[type="button"],
  2423. [role="button"]
  2424. ).outline.secondary:is([aria-current], :hover, :active, :focus),
  2425. input[type="reset"].outline:is([aria-current], :hover, :active, :focus) {
  2426. --color: var(--secondary-hover);
  2427. }
  2428. :is(
  2429. button,
  2430. input[type="submit"],
  2431. input[type="button"],
  2432. [role="button"]
  2433. ).outline.contrast {
  2434. --color: var(--contrast);
  2435. }
  2436. :is(
  2437. button,
  2438. input[type="submit"],
  2439. input[type="button"],
  2440. [role="button"]
  2441. ).outline.contrast:is([aria-current], :hover, :active, :focus) {
  2442. --color: var(--contrast-hover);
  2443. }
  2444. :where(
  2445. button,
  2446. [type="submit"],
  2447. [type="button"],
  2448. [type="reset"],
  2449. [role="button"]
  2450. )[disabled],
  2451. :where(fieldset[disabled])
  2452. :is(
  2453. button,
  2454. [type="submit"],
  2455. [type="button"],
  2456. [type="reset"],
  2457. [role="button"]
  2458. ),
  2459. a[role="button"]:not([href]) {
  2460. opacity: 0.5;
  2461. pointer-events: none;
  2462. }
  2463. /**
  2464. * Form elements
  2465. */
  2466. input,
  2467. optgroup,
  2468. select,
  2469. textarea {
  2470. margin: 0;
  2471. font-size: 1rem;
  2472. line-height: var(--line-height);
  2473. font-family: inherit;
  2474. letter-spacing: inherit;
  2475. }
  2476. input {
  2477. overflow: visible;
  2478. }
  2479. select {
  2480. text-transform: none;
  2481. }
  2482. legend {
  2483. max-width: 100%;
  2484. padding: 0;
  2485. color: inherit;
  2486. white-space: normal;
  2487. }
  2488. textarea {
  2489. overflow: auto;
  2490. }
  2491. [type="checkbox"],
  2492. [type="radio"] {
  2493. padding: 0;
  2494. }
  2495. ::-webkit-inner-spin-button,
  2496. ::-webkit-outer-spin-button {
  2497. height: auto;
  2498. }
  2499. [type="search"] {
  2500. -webkit-appearance: textfield;
  2501. outline-offset: -2px;
  2502. }
  2503. [type="search"]::-webkit-search-decoration {
  2504. -webkit-appearance: none;
  2505. }
  2506. ::-webkit-file-upload-button {
  2507. -webkit-appearance: button;
  2508. font: inherit;
  2509. }
  2510. ::-moz-focus-inner {
  2511. padding: 0;
  2512. border-style: none;
  2513. }
  2514. :-moz-focusring {
  2515. outline: none;
  2516. }
  2517. :-moz-ui-invalid {
  2518. box-shadow: none;
  2519. }
  2520. ::-ms-expand {
  2521. display: none;
  2522. }
  2523. [type="file"],
  2524. [type="range"] {
  2525. padding: 0;
  2526. border-width: 0;
  2527. }
  2528. input:not([type="checkbox"], [type="radio"], [type="range"]) {
  2529. height: calc(
  2530. 1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 +
  2531. var(--border-width) * 2
  2532. );
  2533. }
  2534. fieldset {
  2535. margin: 0;
  2536. margin-bottom: var(--spacing);
  2537. padding: 0;
  2538. border: 0;
  2539. }
  2540. label,
  2541. fieldset legend {
  2542. display: block;
  2543. margin-bottom: calc(var(--spacing) * 0.25);
  2544. font-weight: var(--form-label-font-weight, var(--font-weight));
  2545. }
  2546. input:not([type="checkbox"], [type="radio"]),
  2547. select,
  2548. textarea {
  2549. width: 100%;
  2550. }
  2551. input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
  2552. select,
  2553. textarea {
  2554. -webkit-appearance: none;
  2555. -moz-appearance: none;
  2556. appearance: none;
  2557. padding: var(--form-element-spacing-vertical)
  2558. var(--form-element-spacing-horizontal);
  2559. }
  2560. input,
  2561. select,
  2562. textarea {
  2563. --background-color: var(--form-element-background-color);
  2564. --border-color: var(--form-element-border-color);
  2565. --color: var(--form-element-color);
  2566. --box-shadow: none;
  2567. border: var(--border-width) solid var(--border-color);
  2568. border-radius: var(--border-radius);
  2569. outline: none;
  2570. background-color: var(--background-color);
  2571. box-shadow: var(--box-shadow);
  2572. color: var(--color);
  2573. font-weight: var(--font-weight);
  2574. transition: background-color var(--transition), border-color var(--transition),
  2575. color var(--transition), box-shadow var(--transition);
  2576. }
  2577. input:not(
  2578. [type="submit"],
  2579. [type="button"],
  2580. [type="reset"],
  2581. [type="checkbox"],
  2582. [type="radio"],
  2583. [readonly]
  2584. ):is(:active, :focus),
  2585. :where(select, textarea):is(:active, :focus) {
  2586. --background-color: var(--form-element-active-background-color);
  2587. }
  2588. input:not(
  2589. [type="submit"],
  2590. [type="button"],
  2591. [type="reset"],
  2592. [role="switch"],
  2593. [readonly]
  2594. ):is(:active, :focus),
  2595. :where(select, textarea):is(:active, :focus) {
  2596. --border-color: var(--form-element-active-border-color);
  2597. }
  2598. input:not(
  2599. [type="submit"],
  2600. [type="button"],
  2601. [type="reset"],
  2602. [type="range"],
  2603. [type="file"],
  2604. [readonly]
  2605. ):focus,
  2606. select:focus,
  2607. textarea:focus {
  2608. --box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
  2609. }
  2610. input:not([type="submit"], [type="button"], [type="reset"])[disabled],
  2611. select[disabled],
  2612. textarea[disabled],
  2613. :where(fieldset[disabled])
  2614. :is(
  2615. input:not([type="submit"], [type="button"], [type="reset"]),
  2616. select,
  2617. textarea
  2618. ) {
  2619. --background-color: var(--form-element-disabled-background-color);
  2620. --border-color: var(--form-element-disabled-border-color);
  2621. opacity: var(--form-element-disabled-opacity);
  2622. pointer-events: none;
  2623. }
  2624. :where(input, select, textarea):not(
  2625. [type="checkbox"],
  2626. [type="radio"],
  2627. [type="date"],
  2628. [type="datetime-local"],
  2629. [type="month"],
  2630. [type="time"],
  2631. [type="week"]
  2632. )[aria-invalid] {
  2633. padding-right: calc(
  2634. var(--form-element-spacing-horizontal) + 1.5rem
  2635. ) !important;
  2636. padding-left: var(--form-element-spacing-horizontal);
  2637. -webkit-padding-start: var(--form-element-spacing-horizontal) !important;
  2638. padding-inline-start: var(--form-element-spacing-horizontal) !important;
  2639. -webkit-padding-end: calc(
  2640. var(--form-element-spacing-horizontal) + 1.5rem
  2641. ) !important;
  2642. padding-inline-end: calc(
  2643. var(--form-element-spacing-horizontal) + 1.5rem
  2644. ) !important;
  2645. background-position: center right 0.75rem;
  2646. background-size: 1rem auto;
  2647. background-repeat: no-repeat;
  2648. }
  2649. :where(input, select, textarea):not(
  2650. [type="checkbox"],
  2651. [type="radio"],
  2652. [type="date"],
  2653. [type="datetime-local"],
  2654. [type="month"],
  2655. [type="time"],
  2656. [type="week"]
  2657. )[aria-invalid="false"] {
  2658. background-image: var(--icon-valid);
  2659. }
  2660. :where(input, select, textarea):not(
  2661. [type="checkbox"],
  2662. [type="radio"],
  2663. [type="date"],
  2664. [type="datetime-local"],
  2665. [type="month"],
  2666. [type="time"],
  2667. [type="week"]
  2668. )[aria-invalid="true"] {
  2669. background-image: var(--icon-invalid);
  2670. }
  2671. :where(input, select, textarea)[aria-invalid="false"] {
  2672. --border-color: var(--form-element-valid-border-color);
  2673. }
  2674. :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus) {
  2675. --border-color: var(--form-element-valid-active-border-color) !important;
  2676. --box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;
  2677. }
  2678. :where(input, select, textarea)[aria-invalid="true"] {
  2679. --border-color: var(--form-element-invalid-border-color);
  2680. }
  2681. :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus) {
  2682. --border-color: var(--form-element-invalid-active-border-color) !important;
  2683. --box-shadow: 0 0 0 var(--outline-width)
  2684. var(--form-element-invalid-focus-color) !important;
  2685. }
  2686. [dir="rtl"]
  2687. :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is(
  2688. [aria-invalid],
  2689. [aria-invalid="true"],
  2690. [aria-invalid="false"]
  2691. ) {
  2692. background-position: center left 0.75rem;
  2693. }
  2694. input::placeholder,
  2695. input::-webkit-input-placeholder,
  2696. textarea::placeholder,
  2697. textarea::-webkit-input-placeholder,
  2698. select:invalid {
  2699. color: var(--form-element-placeholder-color);
  2700. opacity: 1;
  2701. }
  2702. input:not([type="checkbox"], [type="radio"]),
  2703. select,
  2704. textarea {
  2705. margin-bottom: var(--spacing);
  2706. }
  2707. select::-ms-expand {
  2708. border: 0;
  2709. background-color: transparent;
  2710. }
  2711. select:not([multiple], [size]) {
  2712. padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
  2713. padding-left: var(--form-element-spacing-horizontal);
  2714. -webkit-padding-start: var(--form-element-spacing-horizontal);
  2715. padding-inline-start: var(--form-element-spacing-horizontal);
  2716. -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
  2717. padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
  2718. background-image: var(--icon-chevron);
  2719. background-position: center right 0.75rem;
  2720. background-size: 1rem auto;
  2721. background-repeat: no-repeat;
  2722. }
  2723. [dir="rtl"] select:not([multiple], [size]) {
  2724. background-position: center left 0.75rem;
  2725. }
  2726. :where(input, select, textarea) + small {
  2727. display: block;
  2728. width: 100%;
  2729. margin-top: calc(var(--spacing) * -0.75);
  2730. margin-bottom: var(--spacing);
  2731. color: var(--muted-color);
  2732. }
  2733. label > :where(input, select, textarea) {
  2734. margin-top: calc(var(--spacing) * 0.25);
  2735. }
  2736. /**
  2737. * Form elements
  2738. * Checkboxes & Radios
  2739. */
  2740. [type="checkbox"],
  2741. [type="radio"] {
  2742. -webkit-appearance: none;
  2743. -moz-appearance: none;
  2744. appearance: none;
  2745. width: 1.25em;
  2746. height: 1.25em;
  2747. margin-top: -0.125em;
  2748. margin-right: 0.375em;
  2749. margin-left: 0;
  2750. -webkit-margin-start: 0;
  2751. margin-inline-start: 0;
  2752. -webkit-margin-end: 0.375em;
  2753. margin-inline-end: 0.375em;
  2754. border-width: var(--border-width);
  2755. font-size: inherit;
  2756. vertical-align: middle;
  2757. cursor: pointer;
  2758. }
  2759. [type="checkbox"]::-ms-check,
  2760. [type="radio"]::-ms-check {
  2761. display: none;
  2762. }
  2763. [type="checkbox"]:checked,
  2764. [type="checkbox"]:checked:active,
  2765. [type="checkbox"]:checked:focus,
  2766. [type="radio"]:checked,
  2767. [type="radio"]:checked:active,
  2768. [type="radio"]:checked:focus {
  2769. --background-color: var(--primary);
  2770. --border-color: var(--primary);
  2771. background-image: var(--icon-checkbox);
  2772. background-position: center;
  2773. background-size: 0.75em auto;
  2774. background-repeat: no-repeat;
  2775. }
  2776. [type="checkbox"] ~ label,
  2777. [type="radio"] ~ label {
  2778. display: inline-block;
  2779. margin-right: 0.375em;
  2780. margin-bottom: 0;
  2781. cursor: pointer;
  2782. }
  2783. [type="checkbox"]:indeterminate {
  2784. --background-color: var(--primary);
  2785. --border-color: var(--primary);
  2786. background-image: var(--icon-minus);
  2787. background-position: center;
  2788. background-size: 0.75em auto;
  2789. background-repeat: no-repeat;
  2790. }
  2791. [type="radio"] {
  2792. border-radius: 50%;
  2793. }
  2794. [type="radio"]:checked,
  2795. [type="radio"]:checked:active,
  2796. [type="radio"]:checked:focus {
  2797. --background-color: var(--primary-inverse);
  2798. border-width: 0.35em;
  2799. background-image: none;
  2800. }
  2801. [type="checkbox"][role="switch"] {
  2802. --background-color: var(--switch-background-color);
  2803. --border-color: var(--switch-background-color);
  2804. --color: var(--switch-color);
  2805. width: 2.25em;
  2806. height: 1.25em;
  2807. border: var(--border-width) solid var(--border-color);
  2808. border-radius: 1.25em;
  2809. background-color: var(--background-color);
  2810. line-height: 1.25em;
  2811. }
  2812. [type="checkbox"][role="switch"]:focus {
  2813. --background-color: var(--switch-background-color);
  2814. --border-color: var(--switch-background-color);
  2815. }
  2816. [type="checkbox"][role="switch"]:checked {
  2817. --background-color: var(--switch-checked-background-color);
  2818. --border-color: var(--switch-checked-background-color);
  2819. }
  2820. [type="checkbox"][role="switch"]:before {
  2821. display: block;
  2822. width: calc(1.25em - (var(--border-width) * 2));
  2823. height: 100%;
  2824. border-radius: 50%;
  2825. background-color: var(--color);
  2826. content: "";
  2827. transition: margin 0.1s ease-in-out;
  2828. }
  2829. [type="checkbox"][role="switch"]:checked {
  2830. background-image: none;
  2831. }
  2832. [type="checkbox"][role="switch"]:checked::before {
  2833. margin-left: calc(1.125em - var(--border-width));
  2834. -webkit-margin-start: calc(1.125em - var(--border-width));
  2835. margin-inline-start: calc(1.125em - var(--border-width));
  2836. }
  2837. [type="checkbox"][aria-invalid="false"],
  2838. [type="checkbox"]:checked[aria-invalid="false"],
  2839. [type="radio"][aria-invalid="false"],
  2840. [type="radio"]:checked[aria-invalid="false"],
  2841. [type="checkbox"][role="switch"][aria-invalid="false"],
  2842. [type="checkbox"][role="switch"]:checked[aria-invalid="false"] {
  2843. --border-color: var(--form-element-valid-border-color);
  2844. }
  2845. [type="checkbox"][aria-invalid="true"],
  2846. [type="checkbox"]:checked[aria-invalid="true"],
  2847. [type="radio"][aria-invalid="true"],
  2848. [type="radio"]:checked[aria-invalid="true"],
  2849. [type="checkbox"][role="switch"][aria-invalid="true"],
  2850. [type="checkbox"][role="switch"]:checked[aria-invalid="true"] {
  2851. --border-color: var(--form-element-invalid-border-color);
  2852. }
  2853. /**
  2854. * Form elements
  2855. * Alternatives input types (Not Checkboxes & Radios)
  2856. */
  2857. [type="color"]::-webkit-color-swatch-wrapper {
  2858. padding: 0;
  2859. }
  2860. [type="color"]::-moz-focus-inner {
  2861. padding: 0;
  2862. }
  2863. [type="color"]::-webkit-color-swatch {
  2864. border: 0;
  2865. border-radius: calc(var(--border-radius) * 0.5);
  2866. }
  2867. [type="color"]::-moz-color-swatch {
  2868. border: 0;
  2869. border-radius: calc(var(--border-radius) * 0.5);
  2870. }
  2871. input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):is(
  2872. [type="date"],
  2873. [type="datetime-local"],
  2874. [type="month"],
  2875. [type="time"],
  2876. [type="week"]
  2877. ) {
  2878. --icon-position: 0.75rem;
  2879. --icon-width: 1rem;
  2880. padding-right: calc(var(--icon-width) + var(--icon-position));
  2881. background-image: var(--icon-date);
  2882. background-position: center right var(--icon-position);
  2883. background-size: var(--icon-width) auto;
  2884. background-repeat: no-repeat;
  2885. }
  2886. input:not(
  2887. [type="checkbox"],
  2888. [type="radio"],
  2889. [type="range"],
  2890. [type="file"]
  2891. )[type="time"] {
  2892. background-image: var(--icon-time);
  2893. }
  2894. [type="date"]::-webkit-calendar-picker-indicator,
  2895. [type="datetime-local"]::-webkit-calendar-picker-indicator,
  2896. [type="month"]::-webkit-calendar-picker-indicator,
  2897. [type="time"]::-webkit-calendar-picker-indicator,
  2898. [type="week"]::-webkit-calendar-picker-indicator {
  2899. width: var(--icon-width);
  2900. margin-right: calc(var(--icon-width) * -1);
  2901. margin-left: var(--icon-position);
  2902. opacity: 0;
  2903. }
  2904. [dir="rtl"]
  2905. :is(
  2906. [type="date"],
  2907. [type="datetime-local"],
  2908. [type="month"],
  2909. [type="time"],
  2910. [type="week"]
  2911. ) {
  2912. text-align: right;
  2913. }
  2914. [type="file"] {
  2915. --color: var(--muted-color);
  2916. padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
  2917. border: 0;
  2918. border-radius: 0;
  2919. background: none;
  2920. }
  2921. [type="file"]::file-selector-button {
  2922. --background-color: var(--secondary);
  2923. --border-color: var(--secondary);
  2924. --color: var(--secondary-inverse);
  2925. margin-right: calc(var(--spacing) / 2);
  2926. margin-left: 0;
  2927. -webkit-margin-start: 0;
  2928. margin-inline-start: 0;
  2929. -webkit-margin-end: calc(var(--spacing) / 2);
  2930. margin-inline-end: calc(var(--spacing) / 2);
  2931. padding: calc(var(--form-element-spacing-vertical) * 0.5)
  2932. calc(var(--form-element-spacing-horizontal) * 0.5);
  2933. border: var(--border-width) solid var(--border-color);
  2934. border-radius: var(--border-radius);
  2935. outline: none;
  2936. background-color: var(--background-color);
  2937. box-shadow: var(--box-shadow);
  2938. color: var(--color);
  2939. font-weight: var(--font-weight);
  2940. font-size: 1rem;
  2941. line-height: var(--line-height);
  2942. text-align: center;
  2943. cursor: pointer;
  2944. transition: background-color var(--transition), border-color var(--transition),
  2945. color var(--transition), box-shadow var(--transition);
  2946. }
  2947. [type="file"]::file-selector-button:is(:hover, :active, :focus) {
  2948. --background-color: var(--secondary-hover);
  2949. --border-color: var(--secondary-hover);
  2950. }
  2951. [type="file"]::-webkit-file-upload-button {
  2952. --background-color: var(--secondary);
  2953. --border-color: var(--secondary);
  2954. --color: var(--secondary-inverse);
  2955. margin-right: calc(var(--spacing) / 2);
  2956. margin-left: 0;
  2957. -webkit-margin-start: 0;
  2958. margin-inline-start: 0;
  2959. -webkit-margin-end: calc(var(--spacing) / 2);
  2960. margin-inline-end: calc(var(--spacing) / 2);
  2961. padding: calc(var(--form-element-spacing-vertical) * 0.5)
  2962. calc(var(--form-element-spacing-horizontal) * 0.5);
  2963. border: var(--border-width) solid var(--border-color);
  2964. border-radius: var(--border-radius);
  2965. outline: none;
  2966. background-color: var(--background-color);
  2967. box-shadow: var(--box-shadow);
  2968. color: var(--color);
  2969. font-weight: var(--font-weight);
  2970. font-size: 1rem;
  2971. line-height: var(--line-height);
  2972. text-align: center;
  2973. cursor: pointer;
  2974. -webkit-transition: background-color var(--transition),
  2975. border-color var(--transition), color var(--transition),
  2976. box-shadow var(--transition);
  2977. transition: background-color var(--transition), border-color var(--transition),
  2978. color var(--transition), box-shadow var(--transition);
  2979. }
  2980. [type="file"]::-webkit-file-upload-button:is(:hover, :active, :focus) {
  2981. --background-color: var(--secondary-hover);
  2982. --border-color: var(--secondary-hover);
  2983. }
  2984. [type="file"]::-ms-browse {
  2985. --background-color: var(--secondary);
  2986. --border-color: var(--secondary);
  2987. --color: var(--secondary-inverse);
  2988. margin-right: calc(var(--spacing) / 2);
  2989. margin-left: 0;
  2990. margin-inline-start: 0;
  2991. margin-inline-end: calc(var(--spacing) / 2);
  2992. padding: calc(var(--form-element-spacing-vertical) * 0.5)
  2993. calc(var(--form-element-spacing-horizontal) * 0.5);
  2994. border: var(--border-width) solid var(--border-color);
  2995. border-radius: var(--border-radius);
  2996. outline: none;
  2997. background-color: var(--background-color);
  2998. box-shadow: var(--box-shadow);
  2999. color: var(--color);
  3000. font-weight: var(--font-weight);
  3001. font-size: 1rem;
  3002. line-height: var(--line-height);
  3003. text-align: center;
  3004. cursor: pointer;
  3005. -ms-transition: background-color var(--transition),
  3006. border-color var(--transition), color var(--transition),
  3007. box-shadow var(--transition);
  3008. transition: background-color var(--transition), border-color var(--transition),
  3009. color var(--transition), box-shadow var(--transition);
  3010. }
  3011. [type="file"]::-ms-browse:is(:hover, :active, :focus) {
  3012. --background-color: var(--secondary-hover);
  3013. --border-color: var(--secondary-hover);
  3014. }
  3015. [type="range"] {
  3016. -webkit-appearance: none;
  3017. -moz-appearance: none;
  3018. appearance: none;
  3019. width: 100%;
  3020. height: 1.25rem;
  3021. background: none;
  3022. }
  3023. [type="range"]::-webkit-slider-runnable-track {
  3024. width: 100%;
  3025. height: 0.25rem;
  3026. border-radius: var(--border-radius);
  3027. background-color: var(--range-border-color);
  3028. -webkit-transition: background-color var(--transition),
  3029. box-shadow var(--transition);
  3030. transition: background-color var(--transition), box-shadow var(--transition);
  3031. }
  3032. [type="range"]::-moz-range-track {
  3033. width: 100%;
  3034. height: 0.25rem;
  3035. border-radius: var(--border-radius);
  3036. background-color: var(--range-border-color);
  3037. -moz-transition: background-color var(--transition),
  3038. box-shadow var(--transition);
  3039. transition: background-color var(--transition), box-shadow var(--transition);
  3040. }
  3041. [type="range"]::-ms-track {
  3042. width: 100%;
  3043. height: 0.25rem;
  3044. border-radius: var(--border-radius);
  3045. background-color: var(--range-border-color);
  3046. -ms-transition: background-color var(--transition),
  3047. box-shadow var(--transition);
  3048. transition: background-color var(--transition), box-shadow var(--transition);
  3049. }
  3050. [type="range"]::-webkit-slider-thumb {
  3051. -webkit-appearance: none;
  3052. width: 1.25rem;
  3053. height: 1.25rem;
  3054. margin-top: -0.5rem;
  3055. border: 2px solid var(--range-thumb-border-color);
  3056. border-radius: 50%;
  3057. background-color: var(--range-thumb-color);
  3058. cursor: pointer;
  3059. -webkit-transition: background-color var(--transition),
  3060. transform var(--transition);
  3061. transition: background-color var(--transition), transform var(--transition);
  3062. }
  3063. [type="range"]::-moz-range-thumb {
  3064. -webkit-appearance: none;
  3065. width: 1.25rem;
  3066. height: 1.25rem;
  3067. margin-top: -0.5rem;
  3068. border: 2px solid var(--range-thumb-border-color);
  3069. border-radius: 50%;
  3070. background-color: var(--range-thumb-color);
  3071. cursor: pointer;
  3072. -moz-transition: background-color var(--transition),
  3073. transform var(--transition);
  3074. transition: background-color var(--transition), transform var(--transition);
  3075. }
  3076. [type="range"]::-ms-thumb {
  3077. -webkit-appearance: none;
  3078. width: 1.25rem;
  3079. height: 1.25rem;
  3080. margin-top: -0.5rem;
  3081. border: 2px solid var(--range-thumb-border-color);
  3082. border-radius: 50%;
  3083. background-color: var(--range-thumb-color);
  3084. cursor: pointer;
  3085. -ms-transition: background-color var(--transition),
  3086. transform var(--transition);
  3087. transition: background-color var(--transition), transform var(--transition);
  3088. }
  3089. [type="range"]:hover,
  3090. [type="range"]:focus {
  3091. --range-border-color: var(--range-active-border-color);
  3092. --range-thumb-color: var(--range-thumb-hover-color);
  3093. }
  3094. [type="range"]:active {
  3095. --range-thumb-color: var(--range-thumb-active-color);
  3096. }
  3097. [type="range"]:active::-webkit-slider-thumb {
  3098. transform: scale(1.25);
  3099. }
  3100. [type="range"]:active::-moz-range-thumb {
  3101. transform: scale(1.25);
  3102. }
  3103. [type="range"]:active::-ms-thumb {
  3104. transform: scale(1.25);
  3105. }
  3106. input:not(
  3107. [type="checkbox"],
  3108. [type="radio"],
  3109. [type="range"],
  3110. [type="file"]
  3111. )[type="search"] {
  3112. -webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
  3113. padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
  3114. border-radius: 5rem;
  3115. background-image: var(--icon-search);
  3116. background-position: center left 1.125rem;
  3117. background-size: 1rem auto;
  3118. background-repeat: no-repeat;
  3119. }
  3120. input:not(
  3121. [type="checkbox"],
  3122. [type="radio"],
  3123. [type="range"],
  3124. [type="file"]
  3125. )[type="search"][aria-invalid] {
  3126. -webkit-padding-start: calc(
  3127. var(--form-element-spacing-horizontal) + 1.75rem
  3128. ) !important;
  3129. padding-inline-start: calc(
  3130. var(--form-element-spacing-horizontal) + 1.75rem
  3131. ) !important;
  3132. background-position: center left 1.125rem, center right 0.75rem;
  3133. }
  3134. input:not(
  3135. [type="checkbox"],
  3136. [type="radio"],
  3137. [type="range"],
  3138. [type="file"]
  3139. )[type="search"][aria-invalid="false"] {
  3140. background-image: var(--icon-search), var(--icon-valid);
  3141. }
  3142. input:not(
  3143. [type="checkbox"],
  3144. [type="radio"],
  3145. [type="range"],
  3146. [type="file"]
  3147. )[type="search"][aria-invalid="true"] {
  3148. background-image: var(--icon-search), var(--icon-invalid);
  3149. }
  3150. [type="search"]::-webkit-search-cancel-button {
  3151. -webkit-appearance: none;
  3152. display: none;
  3153. }
  3154. [dir="rtl"]
  3155. :where(input):not(
  3156. [type="checkbox"],
  3157. [type="radio"],
  3158. [type="range"],
  3159. [type="file"]
  3160. )[type="search"] {
  3161. background-position: center right 1.125rem;
  3162. }
  3163. [dir="rtl"]
  3164. :where(input):not(
  3165. [type="checkbox"],
  3166. [type="radio"],
  3167. [type="range"],
  3168. [type="file"]
  3169. )[type="search"][aria-invalid] {
  3170. background-position: center right 1.125rem, center left 0.75rem;
  3171. }
  3172. /**
  3173. * Table
  3174. */
  3175. :where(table) {
  3176. width: 100%;
  3177. border-collapse: collapse;
  3178. border-spacing: 0;
  3179. text-indent: 0;
  3180. }
  3181. th,
  3182. td {
  3183. padding: calc(var(--spacing) / 2) var(--spacing);
  3184. border-bottom: var(--border-width) solid var(--table-border-color);
  3185. color: var(--color);
  3186. font-weight: var(--font-weight);
  3187. font-size: var(--font-size);
  3188. text-align: left;
  3189. text-align: start;
  3190. }
  3191. tfoot th,
  3192. tfoot td {
  3193. border-top: var(--border-width) solid var(--table-border-color);
  3194. border-bottom: 0;
  3195. }
  3196. table[role="grid"] tbody tr:nth-child(odd) {
  3197. background-color: var(--table-row-stripped-background-color);
  3198. }
  3199. /**
  3200. * Code
  3201. */
  3202. pre,
  3203. code,
  3204. kbd,
  3205. samp {
  3206. font-size: 0.875em;
  3207. font-family: var(--font-family);
  3208. }
  3209. pre {
  3210. -ms-overflow-style: scrollbar;
  3211. overflow: auto;
  3212. }
  3213. pre,
  3214. code,
  3215. kbd {
  3216. border-radius: var(--border-radius);
  3217. background: var(--code-background-color);
  3218. color: var(--code-color);
  3219. font-weight: var(--font-weight);
  3220. line-height: initial;
  3221. }
  3222. code,
  3223. kbd {
  3224. display: inline-block;
  3225. padding: 0.375rem 0.5rem;
  3226. }
  3227. pre {
  3228. display: block;
  3229. margin-bottom: var(--spacing);
  3230. overflow-x: auto;
  3231. }
  3232. pre > code {
  3233. display: block;
  3234. padding: var(--spacing);
  3235. background: none;
  3236. font-size: 14px;
  3237. line-height: var(--line-height);
  3238. }
  3239. code b {
  3240. color: var(--code-tag-color);
  3241. font-weight: var(--font-weight);
  3242. }
  3243. code i {
  3244. color: var(--code-property-color);
  3245. font-style: normal;
  3246. }
  3247. code u {
  3248. color: var(--code-value-color);
  3249. text-decoration: none;
  3250. }
  3251. code em {
  3252. color: var(--code-comment-color);
  3253. font-style: normal;
  3254. }
  3255. kbd {
  3256. background-color: var(--code-kbd-background-color);
  3257. color: var(--code-kbd-color);
  3258. vertical-align: baseline;
  3259. }
  3260. /**
  3261. * Miscs
  3262. */
  3263. hr {
  3264. height: 0;
  3265. border: 0;
  3266. border-top: 1px solid var(--muted-border-color);
  3267. color: inherit;
  3268. }
  3269. [hidden],
  3270. template {
  3271. display: none !important;
  3272. }
  3273. canvas {
  3274. display: inline-block;
  3275. }
  3276. /**
  3277. * Accordion (<details>)
  3278. */
  3279. details {
  3280. display: block;
  3281. margin-bottom: var(--spacing);
  3282. padding-bottom: var(--spacing);
  3283. border-bottom: var(--border-width) solid var(--accordion-border-color);
  3284. }
  3285. details summary {
  3286. line-height: 1rem;
  3287. list-style-type: none;
  3288. cursor: pointer;
  3289. transition: color var(--transition);
  3290. }
  3291. details summary:not([role]) {
  3292. color: var(--accordion-close-summary-color);
  3293. }
  3294. details summary::-webkit-details-marker {
  3295. display: none;
  3296. }
  3297. details summary::marker {
  3298. display: none;
  3299. }
  3300. details summary::-moz-list-bullet {
  3301. list-style-type: none;
  3302. }
  3303. details summary::after {
  3304. display: block;
  3305. width: 1rem;
  3306. height: 1rem;
  3307. -webkit-margin-start: calc(var(--spacing, 1rem) * 0.5);
  3308. margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
  3309. float: right;
  3310. transform: rotate(-90deg);
  3311. background-image: var(--icon-chevron);
  3312. background-position: right center;
  3313. background-size: 1rem auto;
  3314. background-repeat: no-repeat;
  3315. content: "";
  3316. transition: transform var(--transition);
  3317. }
  3318. details summary:focus {
  3319. outline: none;
  3320. }
  3321. details summary:focus:not([role="button"]) {
  3322. color: var(--accordion-active-summary-color);
  3323. }
  3324. details summary[role="button"] {
  3325. width: 100%;
  3326. text-align: left;
  3327. }
  3328. details summary[role="button"]::after {
  3329. height: calc(1rem * var(--line-height, 1.5));
  3330. background-image: var(--icon-chevron-button);
  3331. }
  3332. details summary[role="button"]:not(.outline).contrast::after {
  3333. background-image: var(--icon-chevron-button-inverse);
  3334. }
  3335. details[open] > summary {
  3336. margin-bottom: calc(var(--spacing));
  3337. }
  3338. details[open] > summary:not([role]):not(:focus) {
  3339. color: var(--accordion-open-summary-color);
  3340. }
  3341. details[open] > summary::after {
  3342. transform: rotate(0);
  3343. }
  3344. [dir="rtl"] details summary {
  3345. text-align: right;
  3346. }
  3347. [dir="rtl"] details summary::after {
  3348. float: left;
  3349. background-position: left center;
  3350. }
  3351. /**
  3352. * Card (<article>)
  3353. */
  3354. article {
  3355. margin: var(--block-spacing-vertical) 0;
  3356. padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
  3357. border-radius: var(--border-radius);
  3358. background: var(--card-background-color);
  3359. box-shadow: var(--card-box-shadow);
  3360. }
  3361. article > header,
  3362. article > footer {
  3363. margin-right: calc(var(--block-spacing-horizontal) * -1);
  3364. margin-left: calc(var(--block-spacing-horizontal) * -1);
  3365. padding: calc(var(--block-spacing-vertical) * 0.66)
  3366. var(--block-spacing-horizontal);
  3367. background-color: var(--card-sectionning-background-color);
  3368. }
  3369. article > header {
  3370. margin-top: calc(var(--block-spacing-vertical) * -1);
  3371. margin-bottom: var(--block-spacing-vertical);
  3372. border-bottom: var(--border-width) solid var(--card-border-color);
  3373. border-top-right-radius: var(--border-radius);
  3374. border-top-left-radius: var(--border-radius);
  3375. }
  3376. article > footer {
  3377. margin-top: var(--block-spacing-vertical);
  3378. margin-bottom: calc(var(--block-spacing-vertical) * -1);
  3379. border-top: var(--border-width) solid var(--card-border-color);
  3380. border-bottom-right-radius: var(--border-radius);
  3381. border-bottom-left-radius: var(--border-radius);
  3382. }
  3383. /**
  3384. * Modal (<dialog>)
  3385. */
  3386. #mount {
  3387. --scrollbar-width: 0px;
  3388. }
  3389. dialog {
  3390. display: flex;
  3391. z-index: 999;
  3392. position: fixed;
  3393. top: 0;
  3394. right: 0;
  3395. bottom: 0;
  3396. left: 0;
  3397. align-items: center;
  3398. justify-content: center;
  3399. width: inherit;
  3400. min-width: 100%;
  3401. height: inherit;
  3402. min-height: 100%;
  3403. padding: var(--spacing);
  3404. border: 0;
  3405. -webkit-backdrop-filter: var(--modal-overlay-backdrop-filter);
  3406. backdrop-filter: var(--modal-overlay-backdrop-filter);
  3407. background-color: var(--modal-overlay-background-color);
  3408. color: var(--color);
  3409. }
  3410. dialog article {
  3411. max-height: calc(100vh - var(--spacing) * 2);
  3412. overflow: auto;
  3413. }
  3414. @media (min-width: 576px) {
  3415. dialog article {
  3416. max-width: 510px;
  3417. }
  3418. }
  3419. @media (min-width: 768px) {
  3420. dialog article {
  3421. max-width: 700px;
  3422. }
  3423. }
  3424. dialog article > header,
  3425. dialog article > footer {
  3426. padding: calc(var(--block-spacing-vertical) * 0.5)
  3427. var(--block-spacing-horizontal);
  3428. }
  3429. dialog article > header .close {
  3430. margin: 0;
  3431. margin-left: var(--spacing);
  3432. float: right;
  3433. }
  3434. dialog article > footer {
  3435. text-align: right;
  3436. }
  3437. dialog article > footer [role="button"] {
  3438. margin-bottom: 0;
  3439. }
  3440. dialog article > footer [role="button"]:not(:first-of-type) {
  3441. margin-left: calc(var(--spacing) * 0.5);
  3442. }
  3443. dialog article p:last-of-type {
  3444. margin: 0;
  3445. }
  3446. dialog article .close {
  3447. display: block;
  3448. width: 1rem;
  3449. height: 1rem;
  3450. margin-top: calc(var(--block-spacing-vertical) * -0.5);
  3451. margin-bottom: var(--typography-spacing-vertical);
  3452. margin-left: auto;
  3453. background-image: var(--icon-close);
  3454. background-position: center;
  3455. background-size: auto 1rem;
  3456. background-repeat: no-repeat;
  3457. opacity: 0.5;
  3458. transition: opacity var(--transition);
  3459. }
  3460. dialog article .close:is([aria-current], :hover, :active, :focus) {
  3461. opacity: 1;
  3462. }
  3463. dialog:not([open]),
  3464. dialog[open="false"] {
  3465. display: none;
  3466. }
  3467. .modal-is-open {
  3468. padding-right: var(--scrollbar-width, 0px);
  3469. overflow: hidden;
  3470. pointer-events: none;
  3471. }
  3472. .modal-is-open dialog {
  3473. pointer-events: auto;
  3474. }
  3475. :where(.modal-is-opening, .modal-is-closing) dialog,
  3476. :where(.modal-is-opening, .modal-is-closing) dialog > article {
  3477. animation-duration: 0.2s;
  3478. animation-timing-function: ease-in-out;
  3479. animation-fill-mode: both;
  3480. }
  3481. :where(.modal-is-opening, .modal-is-closing) dialog {
  3482. animation-duration: 0.8s;
  3483. animation-name: modal-overlay;
  3484. }
  3485. :where(.modal-is-opening, .modal-is-closing) dialog > article {
  3486. animation-delay: 0.2s;
  3487. animation-name: modal;
  3488. }
  3489. .modal-is-closing dialog,
  3490. .modal-is-closing dialog > article {
  3491. animation-delay: 0s;
  3492. animation-direction: reverse;
  3493. }
  3494. @keyframes modal-overlay {
  3495. from {
  3496. -webkit-backdrop-filter: none;
  3497. backdrop-filter: none;
  3498. background-color: transparent;
  3499. }
  3500. }
  3501. @keyframes modal {
  3502. from {
  3503. transform: translateY(-100%);
  3504. opacity: 0;
  3505. }
  3506. }
  3507. /**
  3508. * Nav
  3509. */
  3510. :where(nav li)::before {
  3511. float: left;
  3512. content: "​";
  3513. }
  3514. nav,
  3515. nav ul {
  3516. display: flex;
  3517. }
  3518. nav {
  3519. justify-content: space-between;
  3520. }
  3521. nav ol,
  3522. nav ul {
  3523. align-items: center;
  3524. margin-bottom: 0;
  3525. padding: 0;
  3526. list-style: none;
  3527. }
  3528. nav ol:first-of-type,
  3529. nav ul:first-of-type {
  3530. margin-left: calc(var(--nav-element-spacing-horizontal) * -1);
  3531. }
  3532. nav ol:last-of-type,
  3533. nav ul:last-of-type {
  3534. margin-right: calc(var(--nav-element-spacing-horizontal) * -1);
  3535. }
  3536. nav li {
  3537. display: inline-block;
  3538. margin: 0;
  3539. padding: var(--nav-element-spacing-vertical)
  3540. var(--nav-element-spacing-horizontal);
  3541. }
  3542. nav li > * {
  3543. --spacing: 0;
  3544. }
  3545. nav :where(a, [role="link"]) {
  3546. display: inline-block;
  3547. margin: calc(var(--nav-link-spacing-vertical) * -1)
  3548. calc(var(--nav-link-spacing-horizontal) * -1);
  3549. padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
  3550. border-radius: var(--border-radius);
  3551. text-decoration: none;
  3552. }
  3553. nav :where(a, [role="link"]):is([aria-current], :hover, :active, :focus) {
  3554. text-decoration: none;
  3555. }
  3556. nav[aria-label="breadcrumb"] {
  3557. align-items: center;
  3558. justify-content: start;
  3559. }
  3560. nav[aria-label="breadcrumb"] ul li:not(:first-child) {
  3561. -webkit-margin-start: var(--nav-link-spacing-horizontal);
  3562. margin-inline-start: var(--nav-link-spacing-horizontal);
  3563. }
  3564. nav[aria-label="breadcrumb"] ul li:not(:last-child) ::after {
  3565. position: absolute;
  3566. width: calc(var(--nav-link-spacing-horizontal) * 2);
  3567. -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) / 2);
  3568. margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2);
  3569. content: "/";
  3570. color: var(--muted-color);
  3571. text-align: center;
  3572. }
  3573. nav[aria-label="breadcrumb"] a[aria-current] {
  3574. background-color: transparent;
  3575. color: inherit;
  3576. text-decoration: none;
  3577. pointer-events: none;
  3578. }
  3579. nav [role="button"] {
  3580. margin-right: inherit;
  3581. margin-left: inherit;
  3582. padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
  3583. }
  3584. aside nav,
  3585. aside ol,
  3586. aside ul,
  3587. aside li {
  3588. display: block;
  3589. }
  3590. aside li {
  3591. padding: calc(var(--nav-element-spacing-vertical) * 0.5)
  3592. var(--nav-element-spacing-horizontal);
  3593. }
  3594. aside li a {
  3595. display: block;
  3596. }
  3597. aside li [role="button"] {
  3598. margin: inherit;
  3599. }
  3600. [dir="rtl"] nav[aria-label="breadcrumb"] ul li:not(:last-child) ::after {
  3601. content: "\\";
  3602. }
  3603. /**
  3604. * Progress
  3605. */
  3606. progress {
  3607. display: inline-block;
  3608. vertical-align: baseline;
  3609. }
  3610. progress {
  3611. -webkit-appearance: none;
  3612. -moz-appearance: none;
  3613. display: inline-block;
  3614. appearance: none;
  3615. width: 100%;
  3616. height: 0.5rem;
  3617. margin-bottom: calc(var(--spacing) * 0.5);
  3618. overflow: hidden;
  3619. border: 0;
  3620. border-radius: var(--border-radius);
  3621. background-color: var(--progress-background-color);
  3622. color: var(--progress-color);
  3623. }
  3624. progress::-webkit-progress-bar {
  3625. border-radius: var(--border-radius);
  3626. background: none;
  3627. }
  3628. progress[value]::-webkit-progress-value {
  3629. background-color: var(--progress-color);
  3630. }
  3631. progress::-moz-progress-bar {
  3632. background-color: var(--progress-color);
  3633. }
  3634. @media (prefers-reduced-motion: no-preference) {
  3635. progress:indeterminate {
  3636. background: var(--progress-background-color)
  3637. linear-gradient(
  3638. to right,
  3639. var(--progress-color) 30%,
  3640. var(--progress-background-color) 30%
  3641. )
  3642. top left/150% 150% no-repeat;
  3643. animation: progress-indeterminate 1s linear infinite;
  3644. }
  3645. progress:indeterminate[value]::-webkit-progress-value {
  3646. background-color: transparent;
  3647. }
  3648. progress:indeterminate::-moz-progress-bar {
  3649. background-color: transparent;
  3650. }
  3651. }
  3652. @media (prefers-reduced-motion: no-preference) {
  3653. [dir="rtl"] progress:indeterminate {
  3654. animation-direction: reverse;
  3655. }
  3656. }
  3657. @keyframes progress-indeterminate {
  3658. 0% {
  3659. background-position: 200% 0;
  3660. }
  3661. 100% {
  3662. background-position: -200% 0;
  3663. }
  3664. }
  3665. /**
  3666. * Dropdown ([role="list"])
  3667. */
  3668. details[role="list"],
  3669. li[role="list"] {
  3670. position: relative;
  3671. }
  3672. details[role="list"] summary + ul,
  3673. li[role="list"] > ul {
  3674. display: flex;
  3675. z-index: 99;
  3676. position: absolute;
  3677. top: auto;
  3678. right: 0;
  3679. left: 0;
  3680. flex-direction: column;
  3681. margin: 0;
  3682. padding: 0;
  3683. border: var(--border-width) solid var(--dropdown-border-color);
  3684. border-radius: var(--border-radius);
  3685. border-top-right-radius: 0;
  3686. border-top-left-radius: 0;
  3687. background-color: var(--dropdown-background-color);
  3688. box-shadow: var(--card-box-shadow);
  3689. color: var(--dropdown-color);
  3690. white-space: nowrap;
  3691. }
  3692. details[role="list"] summary + ul li,
  3693. li[role="list"] > ul li {
  3694. width: 100%;
  3695. margin-bottom: 0;
  3696. padding: calc(var(--form-element-spacing-vertical) * 0.5)
  3697. var(--form-element-spacing-horizontal);
  3698. list-style: none;
  3699. }
  3700. details[role="list"] summary + ul li:first-of-type,
  3701. li[role="list"] > ul li:first-of-type {
  3702. margin-top: calc(var(--form-element-spacing-vertical) * 0.5);
  3703. }
  3704. details[role="list"] summary + ul li:last-of-type,
  3705. li[role="list"] > ul li:last-of-type {
  3706. margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
  3707. }
  3708. details[role="list"] summary + ul li a,
  3709. li[role="list"] > ul li a {
  3710. display: block;
  3711. margin: calc(var(--form-element-spacing-vertical) * -0.5)
  3712. calc(var(--form-element-spacing-horizontal) * -1);
  3713. padding: calc(var(--form-element-spacing-vertical) * 0.5)
  3714. var(--form-element-spacing-horizontal);
  3715. overflow: hidden;
  3716. color: var(--dropdown-color);
  3717. text-decoration: none;
  3718. text-overflow: ellipsis;
  3719. }
  3720. details[role="list"] summary + ul li a:hover,
  3721. li[role="list"] > ul li a:hover {
  3722. background-color: var(--dropdown-hover-background-color);
  3723. }
  3724. details[role="list"] summary::after,
  3725. li[role="list"] > a::after {
  3726. display: block;
  3727. width: 1rem;
  3728. height: calc(1rem * var(--line-height, 1.5));
  3729. -webkit-margin-start: 0.5rem;
  3730. margin-inline-start: 0.5rem;
  3731. float: right;
  3732. transform: rotate(0deg);
  3733. background-position: right center;
  3734. background-size: 1rem auto;
  3735. background-repeat: no-repeat;
  3736. content: "";
  3737. }
  3738. details[role="list"] {
  3739. padding: 0;
  3740. border-bottom: none;
  3741. }
  3742. details[role="list"] summary {
  3743. margin-bottom: 0;
  3744. }
  3745. details[role="list"] summary:not([role]) {
  3746. height: calc(
  3747. 1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 +
  3748. var(--border-width) * 2
  3749. );
  3750. padding: var(--form-element-spacing-vertical)
  3751. var(--form-element-spacing-horizontal);
  3752. border: var(--border-width) solid var(--form-element-border-color);
  3753. border-radius: var(--border-radius);
  3754. background-color: var(--form-element-background-color);
  3755. color: var(--form-element-placeholder-color);
  3756. line-height: inherit;
  3757. cursor: pointer;
  3758. transition: background-color var(--transition), border-color var(--transition),
  3759. color var(--transition), box-shadow var(--transition);
  3760. }
  3761. details[role="list"] summary:not([role]):active,
  3762. details[role="list"] summary:not([role]):focus {
  3763. border-color: var(--form-element-active-border-color);
  3764. background-color: var(--form-element-active-background-color);
  3765. }
  3766. details[role="list"] summary:not([role]):focus {
  3767. box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);
  3768. }
  3769. details[role="list"][open] summary {
  3770. border-bottom-right-radius: 0;
  3771. border-bottom-left-radius: 0;
  3772. }
  3773. details[role="list"][open] summary::before {
  3774. display: block;
  3775. z-index: 1;
  3776. position: fixed;
  3777. top: 0;
  3778. right: 0;
  3779. bottom: 0;
  3780. left: 0;
  3781. background: none;
  3782. content: "";
  3783. cursor: default;
  3784. }
  3785. nav details[role="list"] summary,
  3786. nav li[role="list"] a {
  3787. display: flex;
  3788. direction: ltr;
  3789. }
  3790. nav details[role="list"] summary + ul,
  3791. nav li[role="list"] > ul {
  3792. min-width: -moz-fit-content;
  3793. min-width: fit-content;
  3794. border-radius: var(--border-radius);
  3795. }
  3796. nav details[role="list"] summary + ul li a,
  3797. nav li[role="list"] > ul li a {
  3798. border-radius: 0;
  3799. }
  3800. nav details[role="list"] summary,
  3801. nav details[role="list"] summary:not([role]) {
  3802. height: auto;
  3803. padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
  3804. }
  3805. nav details[role="list"][open] summary {
  3806. border-radius: var(--border-radius);
  3807. }
  3808. nav details[role="list"] summary + ul {
  3809. margin-top: var(--outline-width);
  3810. -webkit-margin-start: 0;
  3811. margin-inline-start: 0;
  3812. }
  3813. nav details[role="list"] summary[role="link"] {
  3814. margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
  3815. line-height: var(--line-height);
  3816. }
  3817. nav details[role="list"] summary[role="link"] + ul {
  3818. margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
  3819. -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
  3820. margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);
  3821. }
  3822. li[role="list"]:hover > ul,
  3823. li[role="list"] a:active ~ ul,
  3824. li[role="list"] a:focus ~ ul {
  3825. display: flex;
  3826. }
  3827. li[role="list"] > ul {
  3828. display: none;
  3829. margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
  3830. -webkit-margin-start: calc(
  3831. var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)
  3832. );
  3833. margin-inline-start: calc(
  3834. var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)
  3835. );
  3836. }
  3837. li[role="list"] > a::after {
  3838. background-image: var(--icon-chevron);
  3839. }
  3840. /**
  3841. * Loading ([aria-busy=true])
  3842. */
  3843. [aria-busy="true"] {
  3844. cursor: progress;
  3845. }
  3846. [aria-busy="true"]:not(input, select, textarea)::before {
  3847. display: inline-block;
  3848. width: 1em;
  3849. height: 1em;
  3850. border: 0.1875em solid currentColor;
  3851. border-radius: 1em;
  3852. border-right-color: transparent;
  3853. content: "";
  3854. vertical-align: text-bottom;
  3855. vertical-align: -0.125em;
  3856. animation: spinner 0.75s linear infinite;
  3857. opacity: var(--loading-spinner-opacity);
  3858. }
  3859. [aria-busy="true"]:not(input, select, textarea):not(:empty)::before {
  3860. margin-right: calc(var(--spacing) * 0.5);
  3861. margin-left: 0;
  3862. -webkit-margin-start: 0;
  3863. margin-inline-start: 0;
  3864. -webkit-margin-end: calc(var(--spacing) * 0.5);
  3865. margin-inline-end: calc(var(--spacing) * 0.5);
  3866. }
  3867. [aria-busy="true"]:not(input, select, textarea):empty {
  3868. text-align: center;
  3869. }
  3870. button[aria-busy="true"],
  3871. input[type="submit"][aria-busy="true"],
  3872. input[type="button"][aria-busy="true"],
  3873. input[type="reset"][aria-busy="true"],
  3874. a[aria-busy="true"] {
  3875. pointer-events: none;
  3876. }
  3877. @keyframes spinner {
  3878. to {
  3879. transform: rotate(360deg);
  3880. }
  3881. }
  3882. /**
  3883. * Tooltip ([data-tooltip])
  3884. */
  3885. [data-tooltip] {
  3886. position: relative;
  3887. }
  3888. [data-tooltip]:not(a, button, input) {
  3889. border-bottom: 1px dotted;
  3890. text-decoration: none;
  3891. cursor: help;
  3892. }
  3893. [data-tooltip][data-placement="top"]::before,
  3894. [data-tooltip][data-placement="top"]::after,
  3895. [data-tooltip]::before,
  3896. [data-tooltip]::after {
  3897. display: block;
  3898. z-index: 99;
  3899. position: absolute;
  3900. bottom: 100%;
  3901. left: 50%;
  3902. padding: 0.25rem 0.5rem;
  3903. overflow: hidden;
  3904. transform: translate(-50%, -0.25rem);
  3905. border-radius: var(--border-radius);
  3906. background: var(--tooltip-background-color);
  3907. content: attr(data-tooltip);
  3908. color: var(--tooltip-color);
  3909. font-style: normal;
  3910. font-weight: var(--font-weight);
  3911. font-size: 0.875rem;
  3912. text-decoration: none;
  3913. text-overflow: ellipsis;
  3914. white-space: nowrap;
  3915. opacity: 0;
  3916. pointer-events: none;
  3917. }
  3918. [data-tooltip][data-placement="top"]::after,
  3919. [data-tooltip]::after {
  3920. padding: 0;
  3921. transform: translate(-50%, 0rem);
  3922. border-top: 0.3rem solid;
  3923. border-right: 0.3rem solid transparent;
  3924. border-left: 0.3rem solid transparent;
  3925. border-radius: 0;
  3926. background-color: transparent;
  3927. content: "";
  3928. color: var(--tooltip-background-color);
  3929. }
  3930. [data-tooltip][data-placement="bottom"]::before,
  3931. [data-tooltip][data-placement="bottom"]::after {
  3932. top: 100%;
  3933. bottom: auto;
  3934. transform: translate(-50%, 0.25rem);
  3935. }
  3936. [data-tooltip][data-placement="bottom"]:after {
  3937. transform: translate(-50%, -0.3rem);
  3938. border: 0.3rem solid transparent;
  3939. border-bottom: 0.3rem solid;
  3940. }
  3941. [data-tooltip][data-placement="left"]::before,
  3942. [data-tooltip][data-placement="left"]::after {
  3943. top: 50%;
  3944. right: 100%;
  3945. bottom: auto;
  3946. left: auto;
  3947. transform: translate(-0.25rem, -50%);
  3948. }
  3949. [data-tooltip][data-placement="left"]:after {
  3950. transform: translate(0.3rem, -50%);
  3951. border: 0.3rem solid transparent;
  3952. border-left: 0.3rem solid;
  3953. }
  3954. [data-tooltip][data-placement="right"]::before,
  3955. [data-tooltip][data-placement="right"]::after {
  3956. top: 50%;
  3957. right: auto;
  3958. bottom: auto;
  3959. left: 100%;
  3960. transform: translate(0.25rem, -50%);
  3961. }
  3962. [data-tooltip][data-placement="right"]:after {
  3963. transform: translate(-0.3rem, -50%);
  3964. border: 0.3rem solid transparent;
  3965. border-right: 0.3rem solid;
  3966. }
  3967. [data-tooltip]:focus::before,
  3968. [data-tooltip]:focus::after,
  3969. [data-tooltip]:hover::before,
  3970. [data-tooltip]:hover::after {
  3971. opacity: 1;
  3972. }
  3973. @media (hover: hover) and (pointer: fine) {
  3974. [data-tooltip][data-placement="bottom"]:focus::before,
  3975. [data-tooltip][data-placement="bottom"]:focus::after,
  3976. [data-tooltip][data-placement="bottom"]:hover [data-tooltip]:focus::before,
  3977. [data-tooltip][data-placement="bottom"]:hover [data-tooltip]:focus::after,
  3978. [data-tooltip]:hover::before,
  3979. [data-tooltip]:hover::after {
  3980. animation-duration: 0.2s;
  3981. animation-name: tooltip-slide-top;
  3982. }
  3983. [data-tooltip][data-placement="bottom"]:focus::after,
  3984. [data-tooltip][data-placement="bottom"]:hover [data-tooltip]:focus::after,
  3985. [data-tooltip]:hover::after {
  3986. animation-name: tooltip-caret-slide-top;
  3987. }
  3988. [data-tooltip][data-placement="bottom"]:focus::before,
  3989. [data-tooltip][data-placement="bottom"]:focus::after,
  3990. [data-tooltip][data-placement="bottom"]:hover::before,
  3991. [data-tooltip][data-placement="bottom"]:hover::after {
  3992. animation-duration: 0.2s;
  3993. animation-name: tooltip-slide-bottom;
  3994. }
  3995. [data-tooltip][data-placement="bottom"]:focus::after,
  3996. [data-tooltip][data-placement="bottom"]:hover::after {
  3997. animation-name: tooltip-caret-slide-bottom;
  3998. }
  3999. [data-tooltip][data-placement="left"]:focus::before,
  4000. [data-tooltip][data-placement="left"]:focus::after,
  4001. [data-tooltip][data-placement="left"]:hover::before,
  4002. [data-tooltip][data-placement="left"]:hover::after {
  4003. animation-duration: 0.2s;
  4004. animation-name: tooltip-slide-left;
  4005. }
  4006. [data-tooltip][data-placement="left"]:focus::after,
  4007. [data-tooltip][data-placement="left"]:hover::after {
  4008. animation-name: tooltip-caret-slide-left;
  4009. }
  4010. [data-tooltip][data-placement="right"]:focus::before,
  4011. [data-tooltip][data-placement="right"]:focus::after,
  4012. [data-tooltip][data-placement="right"]:hover::before,
  4013. [data-tooltip][data-placement="right"]:hover::after {
  4014. animation-duration: 0.2s;
  4015. animation-name: tooltip-slide-right;
  4016. }
  4017. [data-tooltip][data-placement="right"]:focus::after,
  4018. [data-tooltip][data-placement="right"]:hover::after {
  4019. animation-name: tooltip-caret-slide-right;
  4020. }
  4021. }
  4022. @keyframes tooltip-slide-top {
  4023. from {
  4024. transform: translate(-50%, 0.75rem);
  4025. opacity: 0;
  4026. }
  4027. to {
  4028. transform: translate(-50%, -0.25rem);
  4029. opacity: 1;
  4030. }
  4031. }
  4032. @keyframes tooltip-caret-slide-top {
  4033. from {
  4034. opacity: 0;
  4035. }
  4036. 50% {
  4037. transform: translate(-50%, -0.25rem);
  4038. opacity: 0;
  4039. }
  4040. to {
  4041. transform: translate(-50%, 0rem);
  4042. opacity: 1;
  4043. }
  4044. }
  4045. @keyframes tooltip-slide-bottom {
  4046. from {
  4047. transform: translate(-50%, -0.75rem);
  4048. opacity: 0;
  4049. }
  4050. to {
  4051. transform: translate(-50%, 0.25rem);
  4052. opacity: 1;
  4053. }
  4054. }
  4055. @keyframes tooltip-caret-slide-bottom {
  4056. from {
  4057. opacity: 0;
  4058. }
  4059. 50% {
  4060. transform: translate(-50%, -0.5rem);
  4061. opacity: 0;
  4062. }
  4063. to {
  4064. transform: translate(-50%, -0.3rem);
  4065. opacity: 1;
  4066. }
  4067. }
  4068. @keyframes tooltip-slide-left {
  4069. from {
  4070. transform: translate(0.75rem, -50%);
  4071. opacity: 0;
  4072. }
  4073. to {
  4074. transform: translate(-0.25rem, -50%);
  4075. opacity: 1;
  4076. }
  4077. }
  4078. @keyframes tooltip-caret-slide-left {
  4079. from {
  4080. opacity: 0;
  4081. }
  4082. 50% {
  4083. transform: translate(0.05rem, -50%);
  4084. opacity: 0;
  4085. }
  4086. to {
  4087. transform: translate(0.3rem, -50%);
  4088. opacity: 1;
  4089. }
  4090. }
  4091. @keyframes tooltip-slide-right {
  4092. from {
  4093. transform: translate(-0.75rem, -50%);
  4094. opacity: 0;
  4095. }
  4096. to {
  4097. transform: translate(0.25rem, -50%);
  4098. opacity: 1;
  4099. }
  4100. }
  4101. @keyframes tooltip-caret-slide-right {
  4102. from {
  4103. opacity: 0;
  4104. }
  4105. 50% {
  4106. transform: translate(-0.05rem, -50%);
  4107. opacity: 0;
  4108. }
  4109. to {
  4110. transform: translate(-0.3rem, -50%);
  4111. opacity: 1;
  4112. }
  4113. }
  4114. /**
  4115. * Accessibility & User interaction
  4116. */
  4117. [aria-controls] {
  4118. cursor: pointer;
  4119. }
  4120. [aria-disabled="true"],
  4121. [disabled] {
  4122. cursor: not-allowed;
  4123. }
  4124. [aria-hidden="false"][hidden] {
  4125. display: initial;
  4126. }
  4127. [aria-hidden="false"][hidden]:not(:focus) {
  4128. clip: rect(0, 0, 0, 0);
  4129. position: absolute;
  4130. }
  4131. a,
  4132. area,
  4133. button,
  4134. input,
  4135. label,
  4136. select,
  4137. summary,
  4138. textarea,
  4139. [tabindex] {
  4140. -ms-touch-action: manipulation;
  4141. }
  4142. [dir="rtl"] {
  4143. direction: rtl;
  4144. }
  4145. /**
  4146. * Reduce Motion Features
  4147. */
  4148. @media (prefers-reduced-motion: reduce) {
  4149. *:not([aria-busy="true"]),
  4150. :not([aria-busy="true"])::before,
  4151. :not([aria-busy="true"])::after {
  4152. background-attachment: initial !important;
  4153. animation-duration: 1ms !important;
  4154. animation-delay: -1ms !important;
  4155. animation-iteration-count: 1 !important;
  4156. scroll-behavior: auto !important;
  4157. transition-delay: 0s !important;
  4158. transition-duration: 0s !important;
  4159. }
  4160. }
  4161. #mount#mount {
  4162. /* --primary: rgb(227, 59, 126); */
  4163. --primary: #ea4c89;
  4164. --primary-hover: #f082ac;
  4165. --icon-xia: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IkZyYW1lIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTguMDAyOTEgOS42Nzk4M0wzLjgzMzM5IDUuNTEyMjFMMy4wMjUzOSA2LjMxOTgzTDguMDAzMjkgMTEuMjk1MUwxMi45NzYyIDYuMzE5ODNMMTIuMTY3OSA1LjUxMjIxTDguMDAyOTEgOS42Nzk4M1oiIGZpbGw9IiM4MzgzODMiLz4KPC9nPgo8L3N2Zz4K");
  4166. --switch-checked-background-color: var(--primary);
  4167. }
  4168. li.select-link.select-link:hover > ul {
  4169. display: none;
  4170. }
  4171. li.select-link.select-link > ul {
  4172. display: none;
  4173. }
  4174. li.select-link.select-link a:focus ~ ul {
  4175. display: none;
  4176. }
  4177. li.select-link.select-link a:active ~ ul {
  4178. display: none;
  4179. }
  4180. li.select-link-active.select-link-active > ul {
  4181. display: flex;
  4182. }
  4183. li.select-link-active.select-link-active:hover > ul {
  4184. display: flex;
  4185. }
  4186. li.select-link-active.select-link-active a:focus ~ ul {
  4187. display: flex;
  4188. }
  4189. li.select-link-active.select-link-active a:active ~ ul {
  4190. display: flex;
  4191. }
  4192. ul.select-link-ul.select-link-ul {
  4193. right: 0px;
  4194. left: auto;
  4195. }
  4196. a.select-link-selected {
  4197. background-color: var(--primary-focus);
  4198. }
  4199. .immersive-translate-no-select {
  4200. -webkit-touch-callout: none; /* iOS Safari */
  4201. -webkit-user-select: none; /* Safari */
  4202. -khtml-user-select: none; /* Konqueror HTML */
  4203. -moz-user-select: none; /* Old versions of Firefox */
  4204. -ms-user-select: none; /* Internet Explorer/Edge */
  4205. user-select: none;
  4206. }
  4207. /* li[role="list"].no-arrow > a::after { */
  4208. /* background-image: none; */
  4209. /* width: 0; */
  4210. /* color: var(--color); */
  4211. /* } */
  4212. li[role="list"].no-arrow {
  4213. margin-left: 8px;
  4214. padding-right: 0;
  4215. }
  4216. li[role="list"] > a::after {
  4217. -webkit-margin-start: 0.2rem;
  4218. margin-inline-start: 0.2rem;
  4219. }
  4220. li[role="list"].no-arrow > a,
  4221. li[role="list"].no-arrow > a:link,
  4222. li[role="list"].no-arrow > a:visited {
  4223. color: var(--secondary);
  4224. }
  4225. select.min-select {
  4226. --form-element-spacing-horizontal: 0;
  4227. margin-bottom: 4px;
  4228. max-width: 128px;
  4229. overflow: hidden;
  4230. color: var(--primary);
  4231. font-size: 13px;
  4232. border: none;
  4233. padding: 0;
  4234. padding-right: 20px;
  4235. padding-left: 8px;
  4236. text-overflow: ellipsis;
  4237. color: var(--color);
  4238. }
  4239. select.min-select-secondary {
  4240. color: var(--color);
  4241. }
  4242. select.min-select:focus {
  4243. outline: none;
  4244. border: none;
  4245. --box-shadow: none;
  4246. }
  4247. select.min-select-no-arrow {
  4248. background-image: none;
  4249. padding-right: 0;
  4250. }
  4251. select.min-select-left {
  4252. padding-right: 0px;
  4253. /* padding-left: 24px; */
  4254. /* background-position: center left 0; */
  4255. text-overflow: ellipsis;
  4256. text-align: left;
  4257. }
  4258. .muted {
  4259. color: var(--muted-color);
  4260. }
  4261. .select.button-select {
  4262. --background-color: var(--secondary-hover);
  4263. --border-color: var(--secondary-hover);
  4264. --color: var(--secondary-inverse);
  4265. cursor: pointer;
  4266. --box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
  4267. padding: var(--form-element-spacing-vertical)
  4268. var(--form-element-spacing-horizontal);
  4269. border: var(--border-width) solid var(--border-color);
  4270. border-radius: var(--border-radius);
  4271. outline: none;
  4272. background-color: var(--background-color);
  4273. box-shadow: var(--box-shadow);
  4274. color: var(--color);
  4275. font-weight: var(--font-weight);
  4276. font-size: 16px;
  4277. line-height: var(--line-height);
  4278. text-align: center;
  4279. cursor: pointer;
  4280. transition: background-color var(--transition), border-color var(--transition),
  4281. color var(--transition), box-shadow var(--transition);
  4282. -webkit-appearance: button;
  4283. margin: 0;
  4284. margin-bottom: 0px;
  4285. overflow: visible;
  4286. font-family: inherit;
  4287. text-transform: none;
  4288. }
  4289. body {
  4290. padding: 0;
  4291. margin: 0 auto;
  4292. min-width: 268px;
  4293. border-radius: 10px;
  4294. }
  4295. .popup-container {
  4296. font-size: 16px;
  4297. --font-size: 16px;
  4298. color: #666;
  4299. background-color: var(--popup-footer-background-color);
  4300. width: 316px;
  4301. min-width: 316px;
  4302. }
  4303. .popup-content {
  4304. background-color: var(--popup-content-background-color);
  4305. border-radius: 0px 0px 12px 12px;
  4306. padding: 16px 20px;
  4307. }
  4308. .immersive-translate-popup-overlay {
  4309. position: fixed;
  4310. top: 0;
  4311. left: 0;
  4312. height: 100%;
  4313. width: 100%;
  4314. touch-action: none;
  4315. }
  4316. .immersive-translate-popup-wrapper {
  4317. background: var(--background-color);
  4318. border-radius: 10px;
  4319. border: 1px solid var(--muted-border-color);
  4320. }
  4321. #mount#mount {
  4322. --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
  4323. "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
  4324. "Segoe UI Symbol", "Noto Color Emoji";
  4325. --line-height: 1.5;
  4326. --font-weight: 400;
  4327. --font-size: 16px;
  4328. --border-radius: 4px;
  4329. --border-width: 1px;
  4330. --outline-width: 3px;
  4331. --spacing: 16px;
  4332. --typography-spacing-vertical: 24px;
  4333. --block-spacing-vertical: calc(var(--spacing) * 2);
  4334. --block-spacing-horizontal: var(--spacing);
  4335. --grid-spacing-vertical: 0;
  4336. --grid-spacing-horizontal: var(--spacing);
  4337. --form-element-spacing-vertical: 12px;
  4338. --form-element-spacing-horizontal: 16px;
  4339. --nav-element-spacing-vertical: 16px;
  4340. --nav-element-spacing-horizontal: 8px;
  4341. --nav-link-spacing-vertical: 8px;
  4342. --nav-link-spacing-horizontal: 8px;
  4343. --form-label-font-weight: var(--font-weight);
  4344. --transition: 0.2s ease-in-out;
  4345. --modal-overlay-backdrop-filter: blur(4px);
  4346. }
  4347. [data-theme="light"],
  4348. #mount:not([data-theme="dark"]) {
  4349. --popup-footer-background-color: #e8eaeb;
  4350. --popup-content-background-color: #ffffff;
  4351. --popup-item-background-color: #f3f5f6;
  4352. --popup-item-hover-background-color: #eaeced;
  4353. --popup-trial-pro-background-color: #f9fbfc;
  4354. --text-black-2: #222222;
  4355. --text-gray-2: #222222;
  4356. --text-gray-6: #666666;
  4357. --text-gray-9: #999999;
  4358. --text-gray-c2: #c2c2c2;
  4359. --service-select-content-shadow: 0px 2px 12px 0px rgba(75, 76, 77, 0.2);
  4360. --service-select-border-color: #fafafa;
  4361. --service-select-selected-background-color: #f3f5f6;
  4362. }
  4363. @media only screen and (prefers-color-scheme: dark) {
  4364. #mount:not([data-theme="light"]) {
  4365. --popup-footer-background-color: #0d0d0d;
  4366. --popup-content-background-color: #191919;
  4367. --popup-item-background-color: #272727;
  4368. --popup-item-hover-background-color: #333333;
  4369. --popup-trial-pro-background-color: #222222;
  4370. --text-black-2: #ffffff;
  4371. --text-gray-2: #dbdbdb;
  4372. --text-gray-6: #b3b3b3;
  4373. --text-gray-9: #777777;
  4374. --text-gray-c2: #5b5b5b;
  4375. --service-select-content-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.9);
  4376. --service-select-border-color: #2c2c2c;
  4377. --service-select-selected-background-color: #333333;
  4378. }
  4379. }
  4380. [data-theme="dark"] {
  4381. --popup-footer-background-color: #0d0d0d;
  4382. --popup-content-background-color: #191919;
  4383. --popup-item-background-color: #272727;
  4384. --popup-item-hover-background-color: #333333;
  4385. --popup-trial-pro-background-color: #222222;
  4386. --text-black-2: #ffffff;
  4387. --text-gray-2: #dbdbdb;
  4388. --text-gray-6: #b3b3b3;
  4389. --text-gray-9: #777777;
  4390. --text-gray-c2: #5b5b5b;
  4391. --service-select-content-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.9);
  4392. --service-select-border-color: #2c2c2c;
  4393. --service-select-selected-background-color: #333333;
  4394. }
  4395. .text-balck {
  4396. color: var(--text-black-2);
  4397. }
  4398. .text-gray-2 {
  4399. color: var(--text-gray-2);
  4400. }
  4401. .text-gray-6 {
  4402. color: var(--text-gray-6);
  4403. }
  4404. .text-gray-9 {
  4405. color: var(--text-gray-9);
  4406. }
  4407. .text-gray-c2 {
  4408. color: var(--text-gray-c2);
  4409. }
  4410. #mount {
  4411. min-width: 268px;
  4412. }
  4413. .main-button {
  4414. font-size: 15px;
  4415. vertical-align: middle;
  4416. border-radius: 12px;
  4417. padding: unset;
  4418. height: 44px;
  4419. line-height: 44px;
  4420. }
  4421. .pt-4 {
  4422. padding-top: 16px;
  4423. }
  4424. .p-2 {
  4425. padding: 8px;
  4426. }
  4427. .pl-5 {
  4428. padding-left: 48px;
  4429. }
  4430. .p-0 {
  4431. padding: 0;
  4432. }
  4433. .pl-2 {
  4434. padding-left: 8px;
  4435. }
  4436. .pl-4 {
  4437. padding-left: 24px;
  4438. }
  4439. .pt-2 {
  4440. padding-top: 8px;
  4441. }
  4442. .pb-2 {
  4443. padding-bottom: 8px;
  4444. }
  4445. .pb-4 {
  4446. padding-bottom: 16px;
  4447. }
  4448. .pb-5 {
  4449. padding-bottom: 20px;
  4450. }
  4451. .pr-5 {
  4452. padding-right: 48px;
  4453. }
  4454. .text-sm {
  4455. font-size: 13px;
  4456. }
  4457. .text-base {
  4458. font-size: 16px;
  4459. }
  4460. .w-full {
  4461. width: 100%;
  4462. }
  4463. .flex {
  4464. display: flex;
  4465. }
  4466. .flex-row {
  4467. flex-direction: row;
  4468. }
  4469. .flex-wrap {
  4470. flex-wrap: wrap;
  4471. }
  4472. .flex-end {
  4473. justify-content: flex-end;
  4474. }
  4475. .flex-grow {
  4476. flex-grow: 1;
  4477. }
  4478. .justify-between {
  4479. justify-content: space-between;
  4480. }
  4481. .mb-0 {
  4482. margin-bottom: 0px;
  4483. }
  4484. .mb-2 {
  4485. margin-bottom: 8px;
  4486. }
  4487. .mb-4 {
  4488. margin-bottom: 16px;
  4489. }
  4490. .mb-3 {
  4491. margin-bottom: 12px;
  4492. }
  4493. .inline-block {
  4494. display: inline-block;
  4495. }
  4496. .py-2 {
  4497. padding-top: 8px;
  4498. padding-bottom: 8px;
  4499. }
  4500. .py-2-5 {
  4501. padding-top: 6px;
  4502. padding-bottom: 6px;
  4503. }
  4504. .mt-0 {
  4505. margin-top: 0;
  4506. }
  4507. .mt-2 {
  4508. margin-top: 8px;
  4509. }
  4510. .mt-3 {
  4511. margin-top: 12px;
  4512. }
  4513. .mt-4 {
  4514. margin-top: 16px;
  4515. }
  4516. .mt-5 {
  4517. margin-top: 20px;
  4518. }
  4519. .mt-6 {
  4520. margin-top: 24px;
  4521. }
  4522. .mb-1 {
  4523. margin-bottom: 4px;
  4524. }
  4525. .ml-4 {
  4526. margin-left: 24px;
  4527. }
  4528. .ml-3 {
  4529. margin-left: 16px;
  4530. }
  4531. .ml-2 {
  4532. margin-left: 8px;
  4533. }
  4534. .ml-1 {
  4535. margin-left: 4px;
  4536. }
  4537. .mr-1 {
  4538. margin-right: 4px;
  4539. }
  4540. .mr-2 {
  4541. margin-right: 8px;
  4542. }
  4543. .mr-3 {
  4544. margin-right: 16px;
  4545. }
  4546. .mx-2 {
  4547. margin-left: 8px;
  4548. margin-right: 8px;
  4549. }
  4550. .pl-3 {
  4551. padding-left: 12px;
  4552. }
  4553. .pr-3 {
  4554. padding-right: 12px;
  4555. }
  4556. .p-3 {
  4557. padding: 12px;
  4558. }
  4559. .px-1 {
  4560. padding-left: 4px;
  4561. padding-right: 4px;
  4562. }
  4563. .px-3 {
  4564. padding-left: 12px;
  4565. padding-right: 12px;
  4566. }
  4567. .pt-3 {
  4568. padding-top: 12px;
  4569. }
  4570. .px-6 {
  4571. padding-left: 18px;
  4572. padding-right: 18px;
  4573. }
  4574. .px-4 {
  4575. padding-left: 16px;
  4576. padding-right: 16px;
  4577. }
  4578. .pt-6 {
  4579. padding-top: 20px;
  4580. }
  4581. .py-3 {
  4582. padding-top: 12px;
  4583. padding-bottom: 12px;
  4584. }
  4585. .py-0 {
  4586. padding-top: 0;
  4587. padding-bottom: 0;
  4588. }
  4589. .left-auto {
  4590. left: auto !important;
  4591. }
  4592. .max-h-28 {
  4593. max-height: 112px;
  4594. }
  4595. .max-h-30 {
  4596. max-height: 120px;
  4597. }
  4598. .overflow-y-scroll {
  4599. overflow-y: scroll;
  4600. }
  4601. .text-xs {
  4602. font-size: 12px;
  4603. }
  4604. .flex-1 {
  4605. flex: 1;
  4606. }
  4607. .flex-3 {
  4608. flex: 3;
  4609. }
  4610. .flex-4 {
  4611. flex: 4;
  4612. }
  4613. .flex-2 {
  4614. flex: 2;
  4615. }
  4616. .items-center {
  4617. align-items: center;
  4618. }
  4619. .max-content {
  4620. width: max-content;
  4621. }
  4622. .justify-center {
  4623. justify-content: center;
  4624. }
  4625. .items-end {
  4626. align-items: flex-end;
  4627. }
  4628. .items-baseline {
  4629. align-items: baseline;
  4630. }
  4631. .my-5 {
  4632. margin-top: 48px;
  4633. margin-bottom: 48px;
  4634. }
  4635. .my-4 {
  4636. margin-top: 24px;
  4637. margin-bottom: 24px;
  4638. }
  4639. .my-3 {
  4640. margin-top: 16px;
  4641. margin-bottom: 16px;
  4642. }
  4643. .pt-3 {
  4644. padding-top: 12px;
  4645. }
  4646. .px-3 {
  4647. padding-left: 12px;
  4648. padding-right: 12px;
  4649. }
  4650. .pt-2 {
  4651. padding-top: 8px;
  4652. }
  4653. .px-2 {
  4654. padding-left: 8px;
  4655. padding-right: 8px;
  4656. }
  4657. .pt-1 {
  4658. padding-top: 4px;
  4659. }
  4660. .px-1 {
  4661. padding-left: 4px;
  4662. padding-right: 4px;
  4663. }
  4664. .pb-2 {
  4665. padding-bottom: 8px;
  4666. }
  4667. .justify-end {
  4668. justify-content: flex-end;
  4669. }
  4670. .w-auto {
  4671. width: auto;
  4672. }
  4673. .shrink-0 {
  4674. flex-shrink: 0;
  4675. }
  4676. select.language-select,
  4677. select.translate-service,
  4678. select.min-select {
  4679. --form-element-spacing-horizontal: 0;
  4680. margin-bottom: 0px;
  4681. max-width: unset;
  4682. flex: 1;
  4683. overflow: hidden;
  4684. font-size: 13px;
  4685. border: none;
  4686. border-radius: 8px;
  4687. padding-right: 30px;
  4688. padding-left: 0px;
  4689. background-position: center right 12px;
  4690. background-size: 16px auto;
  4691. background-image: var(--icon-xia);
  4692. text-overflow: ellipsis;
  4693. color: var(--text-gray-2);
  4694. background-color: transparent;
  4695. box-shadow: unset !important;
  4696. cursor: pointer;
  4697. }
  4698. select.more {
  4699. background-position: center right;
  4700. padding-right: 20px;
  4701. }
  4702. select.transform-padding-left {
  4703. padding-left: 12px;
  4704. transform: translateX(-12px);
  4705. background-position: center right 0px;
  4706. }
  4707. select.translate-service {
  4708. color: var(--text-black-2);
  4709. }
  4710. /* dark use black, for windows */
  4711. @media (prefers-color-scheme: dark) {
  4712. select.language-select option,
  4713. select.translate-service option,
  4714. select.min-select option {
  4715. background-color: #666666;
  4716. }
  4717. }
  4718. .text-overflow-ellipsis {
  4719. text-overflow: ellipsis;
  4720. overflow: hidden;
  4721. white-space: nowrap;
  4722. }
  4723. .max-w-20 {
  4724. max-width: 180px;
  4725. white-space: nowrap;
  4726. }
  4727. select.min-select-secondary {
  4728. color: var(--color);
  4729. }
  4730. select.min-select:focus {
  4731. outline: none;
  4732. border: none;
  4733. --box-shadow: none;
  4734. }
  4735. select.min-select-no-arrow {
  4736. background-image: none;
  4737. padding-right: 0;
  4738. }
  4739. select.min-select-left {
  4740. padding-right: 0px;
  4741. /* padding-left: 24px; */
  4742. /* background-position: center left 0; */
  4743. text-overflow: ellipsis;
  4744. text-align: left;
  4745. }
  4746. .popup-footer {
  4747. background-color: var(--popup-footer-background-color);
  4748. height: 40px;
  4749. }
  4750. .text-right {
  4751. text-align: right;
  4752. }
  4753. .clickable {
  4754. cursor: pointer;
  4755. }
  4756. .close {
  4757. cursor: pointer;
  4758. width: 16px;
  4759. height: 16px;
  4760. background-image: var(--icon-close);
  4761. background-position: center;
  4762. background-size: auto 1rem;
  4763. background-repeat: no-repeat;
  4764. opacity: 0.5;
  4765. transition: opacity var(--transition);
  4766. }
  4767. .padding-two-column {
  4768. padding-left: 40px;
  4769. padding-right: 40px;
  4770. }
  4771. .muted {
  4772. color: #999;
  4773. }
  4774. .text-label {
  4775. color: #666;
  4776. }
  4777. .display-none {
  4778. display: none;
  4779. }
  4780. /* dark use #18232c */
  4781. @media (prefers-color-scheme: dark) {
  4782. .text-label {
  4783. color: #9ca3af;
  4784. }
  4785. }
  4786. .text-decoration-none {
  4787. text-decoration: none;
  4788. }
  4789. .text-decoration-none:is([aria-current], :hover, :active, :focus),
  4790. [role="link"]:is([aria-current], :hover, :active, :focus) {
  4791. --text-decoration: none !important;
  4792. background-color: transparent !important;
  4793. }
  4794. .language-select-container {
  4795. position: relative;
  4796. width: 100%;
  4797. background-color: var(--popup-item-background-color);
  4798. height: 55px;
  4799. border-radius: 12px;
  4800. }
  4801. select.language-select {
  4802. color: var(--text-black-2);
  4803. font-size: 14px;
  4804. padding: 8px 24px 24px 16px;
  4805. position: absolute;
  4806. border-radius: 12px;
  4807. position: absolute;
  4808. left: 0;
  4809. right: 0;
  4810. top: 0;
  4811. bottom: 0;
  4812. }
  4813. select.text-gray-6 {
  4814. color: var(--text-gray-6);
  4815. }
  4816. .language-select-container label {
  4817. position: absolute;
  4818. bottom: 10px;
  4819. left: 16px;
  4820. font-size: 12px;
  4821. color: var(--text-gray-9);
  4822. line-height: 12px;
  4823. margin: 0;
  4824. }
  4825. .translation-service-container {
  4826. background-color: var(--popup-item-background-color);
  4827. border-radius: 12px;
  4828. }
  4829. .min-select-container {
  4830. display: flex;
  4831. justify-content: space-between;
  4832. align-items: center;
  4833. height: 44px;
  4834. background-color: var(--popup-item-background-color);
  4835. padding-left: 16px;
  4836. }
  4837. .min-select-container:first-child {
  4838. border-top-left-radius: 10px;
  4839. border-top-right-radius: 10px;
  4840. }
  4841. .min-select-container:last-child {
  4842. border-bottom-left-radius: 10px;
  4843. border-bottom-right-radius: 10px;
  4844. }
  4845. .min-select-container:only-child {
  4846. border-radius: 10px;
  4847. }
  4848. .translate-mode {
  4849. width: 44px;
  4850. height: 44px;
  4851. border-radius: 22px;
  4852. background-color: var(--popup-item-background-color);
  4853. display: flex;
  4854. align-items: center;
  4855. justify-content: center;
  4856. flex-shrink: 0;
  4857. cursor: pointer;
  4858. }
  4859. .translate-mode svg {
  4860. fill: var(--text-gray-2);
  4861. }
  4862. .widgets-container {
  4863. display: flex;
  4864. align-items: stretch;
  4865. justify-content: space-between;
  4866. width: 100%;
  4867. gap: 9px;
  4868. }
  4869. .widget-item {
  4870. display: flex;
  4871. flex-direction: column;
  4872. align-items: center;
  4873. justify-content: center;
  4874. background-color: var(--popup-item-background-color);
  4875. font-size: 12px;
  4876. min-height: 59px;
  4877. height: 100%;
  4878. border-radius: 8px;
  4879. cursor: pointer;
  4880. flex: 1;
  4881. padding: 8px 4px;
  4882. text-align: center;
  4883. }
  4884. .widget-icon-container {
  4885. display: flex;
  4886. align-items: center;
  4887. justify-content: center;
  4888. height: 30px;
  4889. width: 100%;
  4890. margin-bottom: 4px;
  4891. }
  4892. .widget-title-container {
  4893. display: flex;
  4894. align-items: flex-start;
  4895. justify-content: center;
  4896. height: 24px;
  4897. width: 100%;
  4898. padding-bottom: 4px;
  4899. }
  4900. .widget-icon {
  4901. margin-bottom: 4px;
  4902. display: flex;
  4903. justify-content: center;
  4904. }
  4905. .widget-title {
  4906. color: var(--text-gray-6);
  4907. font-size: 12px;
  4908. text-align: center;
  4909. width: 100%;
  4910. font-weight: 400;
  4911. white-space: nowrap;
  4912. overflow: hidden;
  4913. text-overflow: ellipsis;
  4914. padding: 0 2px 2px;
  4915. }
  4916. .widget-item svg {
  4917. fill: var(--text-gray-2);
  4918. }
  4919. .setting svg {
  4920. fill: var(--text-gray-6);
  4921. }
  4922. .share-button-container {
  4923. display: flex;
  4924. align-items: center;
  4925. cursor: pointer;
  4926. padding: 2px 3px 0 8px;
  4927. }
  4928. .share-button-container svg {
  4929. fill: var(--text-gray-9);
  4930. }
  4931. .min-select-container:hover,
  4932. .language-select-container:hover,
  4933. .widget-item:hover,
  4934. .translate-mode:hover {
  4935. background-color: var(--popup-item-hover-background-color);
  4936. }
  4937. .main-button:hover {
  4938. background-color: #f5508f;
  4939. }
  4940. .share-button-container:hover {
  4941. background-color: var(--popup-item-background-color);
  4942. border-radius: 6px;
  4943. }
  4944. .error-boundary {
  4945. background: #fff2f0;
  4946. border: 1px solid #ffccc7;
  4947. display: flex;
  4948. padding: 12px;
  4949. font-size: 14px;
  4950. color: rgba(0, 0, 0, 0.88);
  4951. word-break: break-all;
  4952. margin: 12px;
  4953. border-radius: 12px;
  4954. flex-direction: column;
  4955. }
  4956. .upgrade-pro {
  4957. border-radius: 11px;
  4958. background: linear-gradient(57deg, #272727 19.8%, #696969 82.2%);
  4959. padding: 2px 8px;
  4960. transform: scale(0.85);
  4961. }
  4962. .upgrade-pro span {
  4963. background: linear-gradient(180deg, #ffeab4 17.65%, #f8c235 85.29%);
  4964. background-clip: text;
  4965. -webkit-background-clip: text;
  4966. -webkit-text-fill-color: transparent;
  4967. font-size: 12px;
  4968. margin-left: 4px;
  4969. }
  4970. .upgrade-pro svg {
  4971. margin-top: -2px;
  4972. }
  4973. .upgrade-pro:hover {
  4974. background: linear-gradient(57deg, #3d3d3d 19.8%, #949494 82.2%);
  4975. }
  4976. .border-bottom-radius-0 {
  4977. border-bottom-left-radius: 0 !important;
  4978. border-bottom-right-radius: 0 !important;
  4979. }
  4980. .trial-pro-container {
  4981. border-radius: 0px 0px 12px 12px;
  4982. background: var(--popup-trial-pro-background-color);
  4983. display: flex;
  4984. align-items: center;
  4985. height: 44px;
  4986. padding-left: 16px;
  4987. padding-right: 12px;
  4988. font-size: 12px;
  4989. }
  4990. .trial-pro-container label {
  4991. line-height: 13px;
  4992. color: var(--text-black-2);
  4993. }
  4994. .trial-pro-container img {
  4995. margin-left: 5px;
  4996. }
  4997. .cursor-pointer {
  4998. cursor: pointer;
  4999. }
  5000. .upgrade-pro-discount-act {
  5001. height: 25px;
  5002. display: flex;
  5003. padding: 0 4px;
  5004. align-items: center;
  5005. border-radius: 15px;
  5006. background: linear-gradient(
  5007. 90deg,
  5008. #cefbfa 11.33%,
  5009. #d7f56f 63.75%,
  5010. #fccd5e 100%
  5011. );
  5012. transform: scale(0.9);
  5013. box-shadow: 0px 1.8px 3.6px 0px rgba(0, 0, 0, 0.1);
  5014. cursor: pointer;
  5015. }
  5016. .upgrade-pro-discount-act span {
  5017. font-size: 12px;
  5018. font-weight: 700;
  5019. margin-left: 4px;
  5020. color: #222222;
  5021. }
  5022. .upgrade-pro-discount-act:hover {
  5023. text-decoration: unset;
  5024. background: linear-gradient(
  5025. 90deg,
  5026. #e2fffe 11.33%,
  5027. #e6ff91 63.75%,
  5028. #ffdf93 100%
  5029. );
  5030. }
  5031. .custom-select-container {
  5032. width: 200px;
  5033. position: relative;
  5034. flex: 1;
  5035. }
  5036. .custom-select-content {
  5037. border-radius: 12px;
  5038. background: var(--popup-content-background-color);
  5039. box-shadow: var(--service-select-content-shadow);
  5040. border: 1px solid var(--service-select-border-color);
  5041. padding: 4px 5px;
  5042. position: absolute;
  5043. left: 0;
  5044. right: 0;
  5045. z-index: 100;
  5046. overflow-y: auto;
  5047. }
  5048. .custom-select-item {
  5049. font-size: 13px;
  5050. padding: 5px 6px;
  5051. border-radius: 8px;
  5052. display: flex;
  5053. align-items: center;
  5054. cursor: pointer;
  5055. color: var(--text-black-2);
  5056. width: 100%;
  5057. overflow: hidden;
  5058. height: 30px;
  5059. line-height: 30px;
  5060. }
  5061. .custom-select-item-img {
  5062. width: 20px;
  5063. height: 20px;
  5064. margin-right: 4px;
  5065. }
  5066. @media (prefers-color-scheme: dark) {
  5067. .custom-select-item-img {
  5068. margin-right: 6px;
  5069. }
  5070. }
  5071. .custom-select-content .custom-select-item.selected,
  5072. .custom-select-content .custom-select-item:hover {
  5073. background: var(--service-select-selected-background-color);
  5074. }
  5075. .custom-select-item > span {
  5076. white-space: nowrap;
  5077. overflow: hidden;
  5078. text-overflow: ellipsis;
  5079. }
  5080. .custom-select-item-pro {
  5081. font-size: 12px;
  5082. margin-left: 6px;
  5083. }
  5084. .custom-select-item-pro img {
  5085. margin: 0 3px;
  5086. width: 20px;
  5087. }
  5088. .more-container {
  5089. position: relative;
  5090. }
  5091. .new-menu-indicator {
  5092. position: absolute;
  5093. width: 8px;
  5094. height: 8px;
  5095. background-color: #ef3434;
  5096. border-radius: 50%;
  5097. right: 18px;
  5098. top: 4px;
  5099. }
  5100. html {
  5101. font-size: 17px;
  5102. }
  5103. @media print {
  5104. .imt-fb-container {
  5105. display: none !important;
  5106. }
  5107. }
  5108. #mount#mount {
  5109. position: absolute;
  5110. display: none;
  5111. min-width: 250px;
  5112. height: auto;
  5113. --font-size: 17px;
  5114. font-size: 17px;
  5115. }
  5116. /* float-ball */
  5117. .imt-fb-container {
  5118. position: fixed;
  5119. padding: 0;
  5120. z-index: 2147483647;
  5121. top: 335px;
  5122. width: fit-content;
  5123. display: flex;
  5124. flex-direction: column;
  5125. display: none;
  5126. }
  5127. .imt-fb-container.left {
  5128. align-items: flex-start;
  5129. left: 0;
  5130. }
  5131. .imt-fb-container.right {
  5132. align-items: flex-end;
  5133. right: 0;
  5134. }
  5135. .imt-fb-btn {
  5136. cursor: pointer;
  5137. background: var(--float-ball-more-button-background-color);
  5138. height: 36px;
  5139. width: 56px;
  5140. box-shadow: 2px 6px 10px 0px #0e121629;
  5141. }
  5142. .imt-fb-btn.left {
  5143. border-top-right-radius: 36px;
  5144. border-bottom-right-radius: 36px;
  5145. }
  5146. .imt-fb-btn.right {
  5147. border-top-left-radius: 36px;
  5148. border-bottom-left-radius: 36px;
  5149. }
  5150. .imt-fb-btn div {
  5151. background: var(--float-ball-more-button-background-color);
  5152. height: 36px;
  5153. width: 54px;
  5154. display: flex;
  5155. align-items: center;
  5156. }
  5157. .imt-fb-btn.left div {
  5158. border-top-right-radius: 34px;
  5159. border-bottom-right-radius: 34px;
  5160. justify-content: flex-end;
  5161. }
  5162. .imt-fb-btn.right div {
  5163. border-top-left-radius: 34px;
  5164. border-bottom-left-radius: 34px;
  5165. }
  5166. .imt-fb-logo-img {
  5167. width: 20px;
  5168. height: 20px;
  5169. margin: 0 10px;
  5170. }
  5171. .imt-fb-logo-img-big-bg {
  5172. width: 28px;
  5173. height: 28px;
  5174. margin: 0;
  5175. padding: 4px;
  5176. background-color: #ed6d8f;
  5177. border-radius: 50%;
  5178. margin: 0 5px;
  5179. }
  5180. .imt-float-ball-translated {
  5181. position: absolute;
  5182. width: 11px;
  5183. height: 11px;
  5184. bottom: 4px;
  5185. right: 20px;
  5186. }
  5187. .btn-animate {
  5188. -webkit-transform: translate3d(0, 0, 0);
  5189. transform: translate3d(0, 0, 0);
  5190. -webkit-transition: -webkit-transform ease-out 250ms;
  5191. transition: -webkit-transform ease-out 250ms;
  5192. transition: transform ease-out 250ms;
  5193. transition: transform ease-out 250ms, -webkit-transform ease-out 250ms;
  5194. }
  5195. .imt-fb-setting-btn {
  5196. margin-right: 18px;
  5197. width: 28px;
  5198. height: 28px;
  5199. }
  5200. .immersive-translate-popup-wrapper {
  5201. background: var(--background-color);
  5202. border-radius: 20px;
  5203. box-shadow: 2px 10px 24px 0px #0e121614;
  5204. border: none;
  5205. }
  5206. .popup-container {
  5207. border-radius: 20px;
  5208. }
  5209. .popup-content {
  5210. border-radius: 20px 20px 12px 12px;
  5211. }
  5212. .popup-footer {
  5213. border-radius: 20px;
  5214. }
  5215. .imt-fb-close-button {
  5216. pointer-events: all;
  5217. cursor: pointer;
  5218. position: absolute;
  5219. margin-top: -10px;
  5220. }
  5221. .imt-fb-close-content {
  5222. padding: 22px;
  5223. width: 320px;
  5224. pointer-events: all;
  5225. }
  5226. .imt-fb-close-title {
  5227. font-weight: 500;
  5228. color: var(--h2-color);
  5229. }
  5230. .imt-fb-close-radio-content {
  5231. background-color: var(--background-light-green);
  5232. padding: 8px 20px;
  5233. }
  5234. .imt-fb-radio-sel,
  5235. .imt-fb-radio-nor {
  5236. width: 16px;
  5237. height: 16px;
  5238. border-radius: 8px;
  5239. flex-shrink: 0;
  5240. }
  5241. .imt-fb-radio-sel {
  5242. border: 2px solid var(--primary);
  5243. display: flex;
  5244. align-items: center;
  5245. justify-content: center;
  5246. }
  5247. .imt-fb-radio-sel div {
  5248. width: 8px;
  5249. height: 8px;
  5250. border-radius: 4px;
  5251. background-color: var(--primary);
  5252. }
  5253. .imt-fb-radio-nor {
  5254. border: 2px solid #d3d4d6;
  5255. }
  5256. .imt-fb-primary-btn {
  5257. background-color: var(--primary);
  5258. width: 72px;
  5259. height: 32px;
  5260. color: white;
  5261. border-radius: 8px;
  5262. text-align: center;
  5263. line-height: 32px;
  5264. font-size: 16px;
  5265. cursor: pointer;
  5266. }
  5267. .imt-fb-default-btn {
  5268. border: 1px solid var(--primary);
  5269. width: 72px;
  5270. height: 32px;
  5271. border-radius: 8px;
  5272. color: var(--primary);
  5273. line-height: 32px;
  5274. text-align: center;
  5275. font-size: 16px;
  5276. cursor: pointer;
  5277. }
  5278. .imt-fb-guide-container {
  5279. width: 312px;
  5280. transform: translateY(-50%);
  5281. }
  5282. .imt-fb-guide-bg {
  5283. position: absolute;
  5284. left: 30px;
  5285. right: 0;
  5286. top: 0;
  5287. bottom: 0;
  5288. z-index: -1;
  5289. height: 100%;
  5290. width: 90%;
  5291. }
  5292. .imt-fb-guide-bg.left {
  5293. transform: scaleX(-1);
  5294. }
  5295. .imt-fb-guide-content {
  5296. margin: 16px -30px 80px 0px;
  5297. display: flex;
  5298. flex-direction: column;
  5299. align-items: center;
  5300. }
  5301. .imt-fb-guide-content.left {
  5302. margin: 16px 21px 60px 32px;
  5303. }
  5304. .imt-fb-guide-img {
  5305. width: 220px;
  5306. height: 112px;
  5307. }
  5308. .imt-fb-guide-message {
  5309. font-size: 16px;
  5310. line-height: 28px;
  5311. color: #333333;
  5312. white-space: pre-wrap;
  5313. text-align: center;
  5314. font-weight: 700;
  5315. margin-bottom: 20px;
  5316. }
  5317. .imt-fb-guide-button {
  5318. margin-top: 16px;
  5319. line-height: 40px;
  5320. height: 40px;
  5321. padding: 0 20px;
  5322. width: unset;
  5323. }
  5324. .imt-fb-more-buttons {
  5325. box-shadow: 0px 2px 10px 0px #00000014;
  5326. border: none;
  5327. background: var(--float-ball-more-button-background-color);
  5328. width: 36px;
  5329. display: flex;
  5330. flex-direction: column;
  5331. border-radius: 18px;
  5332. margin-top: 0px;
  5333. padding: 7px 0 7px 0;
  5334. }
  5335. .imt-fb-more-buttons > div {
  5336. margin: auto;
  5337. }
  5338. .imt-fb-side {
  5339. border-radius: 50%;
  5340. margin-bottom: 10px;
  5341. cursor: pointer;
  5342. pointer-events: all;
  5343. }
  5344. .imt-fb-side * {
  5345. pointer-events: all;
  5346. }
  5347. .imt-fb-more-button {
  5348. width: 36px;
  5349. display: flex;
  5350. align-items: center;
  5351. justify-content: center;
  5352. cursor: pointer;
  5353. }
  5354. /* Sheet.css */
  5355. .immersive-translate-sheet {
  5356. position: fixed;
  5357. transform: translateY(100%);
  5358. /* Start off screen */
  5359. left: 0;
  5360. right: 0;
  5361. background-color: white;
  5362. transition: transform 0.3s ease-out;
  5363. /* Smooth slide transition */
  5364. box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
  5365. /* Ensure it's above other content */
  5366. bottom: 0;
  5367. border-top-left-radius: 16px;
  5368. border-top-right-radius: 16px;
  5369. overflow: hidden;
  5370. }
  5371. .immersive-translate-sheet.visible {
  5372. transform: translateY(0);
  5373. }
  5374. .immersive-translate-sheet-backdrop {
  5375. position: fixed;
  5376. top: 0;
  5377. left: 0;
  5378. right: 0;
  5379. bottom: 0;
  5380. background-color: rgba(0, 0, 0, 0.5);
  5381. opacity: 0;
  5382. transition: opacity 0.3s ease-out;
  5383. }
  5384. .immersive-translate-sheet-backdrop.visible {
  5385. opacity: 1;
  5386. }
  5387. .popup-container-sheet {
  5388. max-width: 100vw;
  5389. width: 100vw;
  5390. }
  5391. .imt-no-events svg * {
  5392. pointer-events: none !important;
  5393. }
  5394. .imt-manga-button {
  5395. width: 36px;
  5396. display: flex;
  5397. flex-direction: column;
  5398. position: relative;
  5399. align-items: center;
  5400. justify-content: center;
  5401. cursor: pointer;
  5402. pointer-events: all;
  5403. margin: 0 0 10px 0;
  5404. background-color: var(--float-ball-more-button-background-color);
  5405. border-radius: 18px;
  5406. filter: drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.08));
  5407. opacity: 0.5;
  5408. right: 8px;
  5409. padding: 10px 0 4px 0;
  5410. }
  5411. .imt-manga-feedback {
  5412. cursor: pointer;
  5413. margin-bottom: 10px;
  5414. }
  5415. .imt-fb-feedback {
  5416. cursor: pointer;
  5417. margin-top: 10px;
  5418. }
  5419. .imt-fb-upgrade-button {
  5420. cursor: pointer;
  5421. margin-top: 10px;
  5422. }
  5423. .imt-manga-button:hover {
  5424. opacity: 1;
  5425. }
  5426. .imt-manga-translated {
  5427. position: absolute;
  5428. left: 24px;
  5429. top: 20px;
  5430. }
  5431. .imt-float-ball-loading {
  5432. animation: imt-loading-animation 0.6s infinite linear !important;
  5433. }
  5434. .imt-manga-guide-bg {
  5435. position: absolute;
  5436. left: 0;
  5437. right: 0;
  5438. top: 0;
  5439. bottom: 0;
  5440. z-index: -1;
  5441. width: 372px;
  5442. transform: translateY(-50%);
  5443. }
  5444. .imt-manga-guide-content {
  5445. position: absolute;
  5446. top: 15px;
  5447. left: 0;
  5448. right: 0;
  5449. margin: 0 40px 0;
  5450. }
  5451. .img-manga-guide-button {
  5452. width: fit-content;
  5453. margin: 16px auto;
  5454. }
  5455. .img-manga-close {
  5456. position: absolute;
  5457. bottom: -200px;
  5458. width: 32px;
  5459. height: 32px;
  5460. left: 0;
  5461. right: 0;
  5462. margin: auto;
  5463. cursor: pointer;
  5464. }
  5465. .imt-fb-container.dragging .imt-fb-more-buttons,
  5466. .imt-fb-container.dragging .imt-manga-button,
  5467. .imt-fb-container.dragging .btn-animate:not(.imt-fb-btn) {
  5468. display: none !important;
  5469. }
  5470. .imt-fb-container.dragging .imt-fb-btn {
  5471. border-radius: 50% !important;
  5472. width: 36px !important;
  5473. height: 36px !important;
  5474. display: flex !important;
  5475. align-items: center !important;
  5476. justify-content: center !important;
  5477. cursor: move !important;
  5478. }
  5479. .imt-fb-container.dragging .imt-fb-btn div {
  5480. border-radius: 50% !important;
  5481. width: 36px !important;
  5482. height: 36px !important;
  5483. display: flex !important;
  5484. align-items: center !important;
  5485. justify-content: center !important;
  5486. margin: 0 !important;
  5487. }
  5488. .imt-fb-container.dragging .imt-fb-btn.left,
  5489. .imt-fb-container.dragging .imt-fb-btn.right {
  5490. border-radius: 50% !important;
  5491. }
  5492. .imt-fb-container.dragging .imt-fb-btn.left div,
  5493. .imt-fb-container.dragging .imt-fb-btn.right div {
  5494. border-radius: 50% !important;
  5495. }
  5496. .imt-fb-container.dragging .imt-fb-logo-img {
  5497. margin: 0 !important;
  5498. padding: 4px !important;
  5499. }
  5500. .imt-fb-container.dragging .imt-float-ball-translated {
  5501. right: 2px !important;
  5502. bottom: 2px !important;
  5503. }
  5504. @-webkit-keyframes imt-loading-animation {
  5505. from {
  5506. -webkit-transform: rotate(0deg);
  5507. }
  5508. to {
  5509. -webkit-transform: rotate(359deg);
  5510. }
  5511. }
  5512. @keyframes imt-loading-animation {
  5513. from {
  5514. transform: rotate(0deg);
  5515. }
  5516. to {
  5517. transform: rotate(359deg);
  5518. }
  5519. }
  5520. </style><div id="mount" style="display: block;"><div class="imt-fb-container right notranslate " dir="ltr" style="z-index: 2147483637; pointer-events: none; right: 0px; top: 196px; display: flex;"><div hidden="" class="imt-manga-button imt-no-events btn-animate " id="manga-button" style="transform: translateX(2px);"><div style="position: relative; pointer-events: all; display: inline-block; opacity: 1;"><div><svg class="imt-manga-feedback" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.0003 14.2749C11.213 14.2749 11.3895 14.2047 11.5299 14.0643C11.6705 13.9239 11.7408 13.7473 11.7408 13.5345C11.7408 13.3218 11.6705 13.1453 11.5299 13.0049C11.3895 12.8645 11.213 12.7943 11.0003 12.7943C10.7877 12.7943 10.6111 12.8645 10.4707 13.0049C10.3302 13.1453 10.2599 13.3218 10.2599 13.5345C10.2599 13.7473 10.3302 13.9239 10.4707 14.0643C10.6111 14.2047 10.7877 14.2749 11.0003 14.2749ZM11.0003 11.0842C11.1954 11.0842 11.3587 11.0185 11.4903 10.8869C11.622 10.7552 11.6878 10.5918 11.6878 10.3967V6.23645C11.6878 6.04135 11.622 5.87803 11.4903 5.74649C11.3587 5.6148 11.1954 5.54895 11.0003 5.54895C10.8052 5.54895 10.6419 5.6148 10.5104 5.74649C10.3787 5.87803 10.3128 6.04135 10.3128 6.23645V10.3967C10.3128 10.5918 10.3787 10.7552 10.5104 10.8869C10.6419 11.0185 10.8052 11.0842 11.0003 11.0842ZM5.53562 16.8311L3.70045 18.666C3.43966 18.9269 3.13968 18.9861 2.80051 18.8434C2.4615 18.7005 2.29199 18.4434 2.29199 18.072V4.73816C2.29199 4.27509 2.45241 3.88314 2.77324 3.5623C3.09408 3.24147 3.48603 3.08105 3.9491 3.08105H18.0516C18.5146 3.08105 18.9066 3.24147 19.2274 3.5623C19.5482 3.88314 19.7087 4.27509 19.7087 4.73816V15.174C19.7087 15.637 19.5482 16.029 19.2274 16.3498C18.9066 16.6706 18.5146 16.8311 18.0516 16.8311H5.53562ZM4.95033 15.4561H18.0516C18.1221 15.4561 18.1868 15.4266 18.2454 15.3678C18.3042 15.3092 18.3337 15.2445 18.3337 15.174V4.73816C18.3337 4.66758 18.3042 4.60295 18.2454 4.54428C18.1868 4.48546 18.1221 4.45605 18.0516 4.45605H3.9491C3.87851 4.45605 3.81389 4.48546 3.75522 4.54428C3.6964 4.60295 3.66699 4.66758 3.66699 4.73816V16.7254L4.95033 15.4561Z" fill="#666666"></path></svg></div></div><div style="position: relative;"><svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="manhua"><path id="Vector" d="M14.8853 4.92364C14.8853 4.92364 16.3905 10.4362 22.6668 4C22.6668 4 20.3381 10.8907 25.3364 10.0843C25.3364 10.0843 22.0563 15.6994 29 18.0599C29 18.0599 22.9934 19.306 21.1617 28C21.1617 28 17.7679 24.54 14.8853 27.3549C14.8853 27.3549 13.3233 23.5724 7.33097 26.27C7.33097 26.27 10.1141 20.6549 4.83179 21.0507C4.83179 21.0507 7.16057 18.8955 3 15.9047C3 15.9047 7.50137 16.1833 6.33697 11.7117C6.33697 11.7117 10.0005 12.3421 8.66576 6.82957C8.65156 6.81491 12.4855 9.80574 14.8853 4.92364Z" fill="#ED6D8F"></path><path id="Vector_2" d="M20.8599 13.7022C20.885 13.1361 20.9543 12.5713 20.9959 12.0052C21.0337 11.568 20.8107 11.2794 20.3876 11.18C20.0759 11.1013 19.7508 11.0867 19.433 11.137C19.1951 11.1945 18.9542 11.2396 18.7113 11.2721C18.2403 11.3028 17.9973 11.5275 17.9796 11.988C17.977 12.0833 17.9596 12.1777 17.928 12.268C17.3034 13.9102 16.6774 15.5499 16.0503 17.1873C16.0301 17.2401 16.0062 17.2904 15.9671 17.3776C15.7291 16.8975 15.4281 16.4898 15.2745 15.9986C14.8073 14.5152 14.3186 13.033 13.8312 11.5594C13.6826 11.1112 13.3489 10.9344 12.8754 11.0216C12.7889 11.0365 12.7008 11.0398 12.6134 11.0314C12.2241 10.9938 11.8311 11.0404 11.4623 11.1677C11.0946 11.2991 10.9498 11.557 11.0152 11.9254C11.0428 12.0371 11.0643 12.1503 11.0795 12.2643C11.1223 13.1902 11.1777 14.1087 11.2054 15.0321C11.257 16.7992 11.2117 18.5651 11.0858 20.3284C11.0644 20.6354 11.0304 20.9424 11.0228 21.2494C11.0115 21.6092 11.1613 21.7811 11.5266 21.8143C11.9976 21.8573 12.4711 21.8708 12.9421 21.9088C13.0309 21.9201 13.121 21.9003 13.1962 21.8528C13.2714 21.8053 13.3268 21.7334 13.3527 21.6497C13.3996 21.5394 13.4252 21.4216 13.4282 21.3022C13.4295 20.8258 13.4207 20.3493 13.4081 19.8741C13.393 19.3264 13.3917 18.7763 13.3438 18.231C13.2857 17.5839 13.266 16.934 13.2847 16.2847C13.2847 16.2466 13.291 16.2073 13.2985 16.1312C13.3338 16.2024 13.3514 16.2356 13.3665 16.2712C13.9017 17.5228 14.3617 18.8037 14.7443 20.1074C14.7928 20.2421 14.7928 20.3889 14.7443 20.5237C14.6322 20.8196 14.7141 21.037 14.9659 21.1377C15.4445 21.3268 15.9331 21.4926 16.4155 21.6731C16.4865 21.7033 16.566 21.7091 16.6408 21.6895C16.7157 21.6698 16.7815 21.6259 16.8273 21.565C16.9085 21.4643 16.9743 21.3526 17.0225 21.2335C17.0537 21.1374 17.0798 21.0399 17.1006 20.9412C17.3185 20.2425 17.5653 19.5499 17.7517 18.8438C17.9785 17.9723 18.2624 17.1158 18.6018 16.2798C18.6201 16.2439 18.6411 16.2094 18.6647 16.1766C18.6761 16.2319 18.6761 16.254 18.6761 16.2761C18.6345 17.59 18.5955 18.8978 18.5501 20.2056C18.5363 20.5949 18.491 20.9829 18.4809 21.3722C18.4721 21.705 18.6207 21.8708 18.9557 21.9002C19.4355 21.9432 19.9191 21.9592 20.4002 21.9973C20.4888 22.0079 20.5784 21.9875 20.653 21.9399C20.7277 21.8922 20.7827 21.8203 20.8082 21.7369C20.8531 21.6305 20.8766 21.5167 20.8775 21.4017C20.88 20.7668 20.8674 20.132 20.8674 19.4971C20.8662 19.2846 20.8687 19.0722 20.8523 18.8622C20.8158 18.3968 20.7264 17.9314 20.7339 17.4685C20.7515 16.2122 20.8044 14.9572 20.8599 13.7022Z" fill="white"></path></g></svg><svg hidden="true" class="imt-manga-translated" width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="5.5" cy="5.5" r="5.5" fill="#68CD52"></circle><path d="M1.40857 5.87858L2.24148 5.18962L4.15344 6.64214C4.15344 6.64214 6.33547 4.15566 9.00658 2.48145L9.32541 2.87514C9.32541 2.87514 6.28665 5.55844 4.71735 9.07881L1.40857 5.87858Z" fill="white"></path></svg></div><svg class="imt-float-ball-loading" hidden="true" width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin: 9px;"><path d="M9.42859 0C9.84288 0 10.1929 0.387143 10.1929 0.847143V3.99429C10.1929 4.45429 9.84431 4.84143 9.42859 4.84143C9.01431 4.84143 8.66431 4.45571 8.66431 3.99429V0.847143C8.66431 0.387143 9.01288 0 9.42859 0Z" fill="#E9E9E9"></path><path d="M14.1301 1.38877C14.5158 1.62591 14.6301 2.12163 14.4258 2.52305L12.9515 5.19448C12.901 5.28714 12.8325 5.36876 12.75 5.43455C12.6675 5.50035 12.5727 5.54898 12.4712 5.5776C12.3696 5.60621 12.2634 5.61424 12.1586 5.60119C12.0539 5.58814 11.9529 5.55429 11.8615 5.50163C11.6787 5.38432 11.5468 5.20237 11.4923 4.9921C11.4377 4.78184 11.4645 4.55874 11.5672 4.36734L13.0415 1.69591C13.2686 1.29448 13.7443 1.15305 14.1301 1.38877Z" fill="#989697"></path><path d="M17.4685 4.75707C17.5813 4.95451 17.6123 5.18824 17.5549 5.40825C17.4975 5.62826 17.3563 5.81705 17.1614 5.93422L14.4971 7.52564C14.0971 7.76993 13.6014 7.62422 13.3657 7.20707C13.2532 7.00994 13.2222 6.77667 13.2793 6.55702C13.3365 6.33737 13.4771 6.14874 13.6714 6.03136L16.3357 4.43993C16.7371 4.21993 17.2557 4.34136 17.4685 4.7585V4.75707Z" fill="#9B999A"></path><path d="M18.8572 9.42835C18.8572 9.84263 18.47 10.1926 18.01 10.1926H14.8629C14.4029 10.1926 14.0157 9.84406 14.0157 9.42835C14.0157 9.01406 14.4029 8.66406 14.8629 8.66406H18.01C18.47 8.66406 18.8572 9.01263 18.8572 9.42835Z" fill="#A3A1A2"></path><path d="M17.4686 14.1303C17.3515 14.3134 17.1697 14.4455 16.9594 14.5003C16.7491 14.5552 16.5259 14.5286 16.3343 14.426L13.6629 12.9517C13.5702 12.9012 13.4886 12.8327 13.4228 12.7503C13.357 12.6678 13.3084 12.573 13.2798 12.4714C13.2512 12.3698 13.2431 12.2636 13.2562 12.1589C13.2692 12.0542 13.3031 11.9532 13.3558 11.8617C13.4731 11.6789 13.655 11.547 13.8653 11.4925C14.0755 11.4379 14.2986 11.4647 14.49 11.5674L17.1615 13.0417C17.5629 13.2689 17.7043 13.7446 17.4686 14.1303Z" fill="#ABA9AA"></path><path opacity="0.7" d="M14.1 17.4686C13.9026 17.5814 13.6689 17.6124 13.4489 17.555C13.2288 17.4976 13.04 17.3564 12.9229 17.1615L11.3315 14.4972C11.0872 14.0972 11.2329 13.6015 11.65 13.3658C11.8472 13.2533 12.0804 13.2224 12.3001 13.2795C12.5197 13.3366 12.7084 13.4773 12.8257 13.6715L14.4172 16.3358C14.6372 16.7372 14.5157 17.2558 14.0986 17.4686H14.1Z" fill="#B2B2B2"></path><path opacity="0.6" d="M9.42859 18.8571C9.01431 18.8571 8.66431 18.4699 8.66431 18.0099V14.8628C8.66431 14.4028 9.01288 14.0156 9.42859 14.0156C9.84288 14.0156 10.1929 14.4028 10.1929 14.8628V18.0099C10.1929 18.4699 9.84431 18.8571 9.42859 18.8571Z" fill="#BAB8B9"></path><path opacity="0.5" d="M4.72717 17.4685C4.5441 17.3514 4.41195 17.1696 4.35713 16.9593C4.30231 16.749 4.32885 16.5258 4.43145 16.3342L5.90574 13.6628C5.95622 13.5701 6.02472 13.4885 6.1072 13.4227C6.18969 13.3569 6.2845 13.3083 6.38606 13.2797C6.48762 13.251 6.59387 13.243 6.69857 13.2561C6.80327 13.2691 6.90431 13.303 6.99574 13.3556C7.38145 13.5914 7.49431 14.0885 7.29002 14.4899L5.81574 17.1614C5.5886 17.5628 5.11288 17.7042 4.72717 17.4685Z" fill="#C2C0C1"></path><path opacity="0.4" d="M1.38862 14.1002C1.27584 13.9027 1.24483 13.669 1.30223 13.449C1.35964 13.229 1.50089 13.0402 1.69576 12.923L4.36004 11.3316C4.76004 11.0873 5.25576 11.233 5.49147 11.6502C5.60393 11.8473 5.63491 12.0806 5.5778 12.3002C5.52069 12.5199 5.38 12.7085 5.18576 12.8259L2.52004 14.4173C2.12004 14.6373 1.60004 14.5159 1.38862 14.0987V14.1002Z" fill="#CBCBCB"></path><path d="M0 9.42835C0 9.01406 0.387143 8.66406 0.847143 8.66406H3.99429C4.45429 8.66406 4.84143 9.01263 4.84143 9.42835C4.84143 9.84263 4.45571 10.1926 3.99429 10.1926H0.847143C0.387143 10.1926 0 9.84406 0 9.42835Z" fill="#D2D2D2"></path><path opacity="0.2" d="M1.38852 4.72705C1.50561 4.54398 1.68746 4.41183 1.89774 4.35701C2.10803 4.30219 2.33125 4.32873 2.52281 4.43133L5.19424 5.90562C5.28689 5.9561 5.36851 6.0246 5.43431 6.10708C5.5001 6.18957 5.54874 6.28438 5.57735 6.38594C5.60597 6.48749 5.61399 6.59375 5.60094 6.69845C5.5879 6.80315 5.55405 6.90419 5.50138 6.99562C5.38407 7.17844 5.20212 7.31029 4.99186 7.36484C4.78159 7.4194 4.55849 7.39263 4.3671 7.2899L1.69567 5.81562C1.29424 5.58847 1.15281 5.11276 1.38852 4.72705Z" fill="#DADADA"></path><path d="M4.75719 1.38849C4.95463 1.27571 5.18837 1.24471 5.40838 1.30211C5.62838 1.35952 5.81718 1.50077 5.93434 1.69564L7.52577 4.35992C7.77005 4.75992 7.62434 5.25564 7.20719 5.49135C7.01006 5.60381 6.77679 5.63479 6.55714 5.57768C6.33749 5.52056 6.14886 5.37988 6.03148 5.18564L4.44005 2.51992C4.22005 2.11992 4.34148 1.59992 4.75862 1.38849H4.75719Z" fill="#E2E2E2"></path></svg></div><div style="position: relative; pointer-events: all; display: inline-block; opacity: 1;"><div><div style="display: flex; align-items: center; flex-direction: row;"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: block; opacity: 0;"><g clip-path="url(#clip0_2589_9951)"><path d="M7 14C5.14348 14 3.36301 13.2625 2.05025 11.9497C0.737498 10.637 0 8.85652 0 7C0 5.14348 0.737498 3.36301 2.05025 2.05025C3.36301 0.737498 5.14348 0 7 0C8.85652 0 10.637 0.737498 11.9497 2.05025C13.2625 3.36301 14 5.14348 14 7C14 8.85652 13.2625 10.637 11.9497 11.9497C10.637 13.2625 8.85652 14 7 14ZM4.183 5.064L6.118 7L4.183 8.936C4.12409 8.99361 4.07719 9.06234 4.04502 9.1382C4.01285 9.21406 3.99605 9.29554 3.99559 9.37794C3.99513 9.46034 4.01101 9.54201 4.04234 9.61823C4.07366 9.69444 4.11978 9.76369 4.17805 9.82195C4.23631 9.88022 4.30556 9.92634 4.38177 9.95766C4.45799 9.98898 4.53966 10.0049 4.62206 10.0044C4.70446 10.004 4.78594 9.98715 4.8618 9.95498C4.93766 9.92281 5.00639 9.87591 5.064 9.817L7 7.882L8.936 9.817C9.05327 9.93168 9.21104 9.99548 9.37506 9.99457C9.53908 9.99365 9.69612 9.92809 9.8121 9.8121C9.92809 9.69612 9.99365 9.53908 9.99457 9.37506C9.99548 9.21104 9.93168 9.05327 9.817 8.936L7.882 7L9.817 5.064C9.87591 5.00639 9.92281 4.93766 9.95498 4.8618C9.98715 4.78594 10.004 4.70446 10.0044 4.62206C10.0049 4.53966 9.98898 4.45799 9.95766 4.38177C9.92634 4.30556 9.88022 4.23631 9.82195 4.17805C9.76369 4.11978 9.69444 4.07366 9.61823 4.04234C9.54201 4.01101 9.46034 3.99513 9.37794 3.99559C9.29554 3.99605 9.21406 4.01285 9.1382 4.04502C9.06234 4.07719 8.99361 4.12409 8.936 4.183L7 6.118L5.064 4.183C4.94673 4.06832 4.78896 4.00452 4.62494 4.00543C4.46092 4.00635 4.30388 4.07191 4.1879 4.1879C4.07191 4.30388 4.00635 4.46092 4.00543 4.62494C4.00452 4.78896 4.06832 4.94673 4.183 5.064Z" fill="#B1B1B1" fill-opacity="0.32"></path></g><defs><clippath id="clip0_2589_9951"><rect width="14" height="14" fill="white"></rect></clippath></defs></svg><div class="imt-fb-btn right btn-animate " dir="ltr" style="transform: translateX(15px); opacity: 0.7;"><div><svg class="imt-fb-logo-img imt-fb-logo-img-big-bg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"><path fill="none" d="M0 0h24v24H0z"></path><path d="M5 15v2a2 2 0 0 0 1.85 1.995L7 19h3v2H7a4 4 0 0 1-4-4v-2h2zm13-5l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16 10h2zm-1 2.885L15.753 16h2.492L17 12.885zM8 2v2h4v7H8v3H6v-3H2V4h4V2h2zm9 1a4 4 0 0 1 4 4v2h-2V7a2 2 0 0 0-2-2h-3V3h3zM6 6H4v3h2V6zm4 0H8v3h2V6z" fill="rgba(255,255,255,1)"></path></svg><svg hidden="true" class="imt-float-ball-translated" width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="5.5" cy="5.5" r="5.5" fill="#68CD52"></circle><path d="M1.40857 5.87858L2.24148 5.18962L4.15344 6.64214C4.15344 6.64214 6.33547 4.15566 9.00658 2.48145L9.32541 2.87514C9.32541 2.87514 6.28665 5.55844 4.71735 9.07881L1.40857 5.87858Z" fill="white"></path></svg></div></div><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: none; opacity: 0;"><g clip-path="url(#clip0_2589_9951)"><path d="M7 14C5.14348 14 3.36301 13.2625 2.05025 11.9497C0.737498 10.637 0 8.85652 0 7C0 5.14348 0.737498 3.36301 2.05025 2.05025C3.36301 0.737498 5.14348 0 7 0C8.85652 0 10.637 0.737498 11.9497 2.05025C13.2625 3.36301 14 5.14348 14 7C14 8.85652 13.2625 10.637 11.9497 11.9497C10.637 13.2625 8.85652 14 7 14ZM4.183 5.064L6.118 7L4.183 8.936C4.12409 8.99361 4.07719 9.06234 4.04502 9.1382C4.01285 9.21406 3.99605 9.29554 3.99559 9.37794C3.99513 9.46034 4.01101 9.54201 4.04234 9.61823C4.07366 9.69444 4.11978 9.76369 4.17805 9.82195C4.23631 9.88022 4.30556 9.92634 4.38177 9.95766C4.45799 9.98898 4.53966 10.0049 4.62206 10.0044C4.70446 10.004 4.78594 9.98715 4.8618 9.95498C4.93766 9.92281 5.00639 9.87591 5.064 9.817L7 7.882L8.936 9.817C9.05327 9.93168 9.21104 9.99548 9.37506 9.99457C9.53908 9.99365 9.69612 9.92809 9.8121 9.8121C9.92809 9.69612 9.99365 9.53908 9.99457 9.37506C9.99548 9.21104 9.93168 9.05327 9.817 8.936L7.882 7L9.817 5.064C9.87591 5.00639 9.92281 4.93766 9.95498 4.8618C9.98715 4.78594 10.004 4.70446 10.0044 4.62206C10.0049 4.53966 9.98898 4.45799 9.95766 4.38177C9.92634 4.30556 9.88022 4.23631 9.82195 4.17805C9.76369 4.11978 9.69444 4.07366 9.61823 4.04234C9.54201 4.01101 9.46034 3.99513 9.37794 3.99559C9.29554 3.99605 9.21406 4.01285 9.1382 4.04502C9.06234 4.07719 8.99361 4.12409 8.936 4.183L7 6.118L5.064 4.183C4.94673 4.06832 4.78896 4.00452 4.62494 4.00543C4.46092 4.00635 4.30388 4.07191 4.1879 4.1879C4.07191 4.30388 4.00635 4.46092 4.00543 4.62494C4.00452 4.78896 4.06832 4.94673 4.183 5.064Z" fill="#B1B1B1" fill-opacity="0.32"></path></g><defs><clippath id="clip0_2589_9951"><rect width="14" height="14" fill="white"></rect></clippath></defs></svg></div></div></div><div style="position: relative; width: 100%; opacity: 0;"><div title="关闭悬浮球" class="imt-fb-close-button" style="transform: translateX(100%);"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_2589_9951)"><path d="M7 14C5.14348 14 3.36301 13.2625 2.05025 11.9497C0.737498 10.637 0 8.85652 0 7C0 5.14348 0.737498 3.36301 2.05025 2.05025C3.36301 0.737498 5.14348 0 7 0C8.85652 0 10.637 0.737498 11.9497 2.05025C13.2625 3.36301 14 5.14348 14 7C14 8.85652 13.2625 10.637 11.9497 11.9497C10.637 13.2625 8.85652 14 7 14ZM4.183 5.064L6.118 7L4.183 8.936C4.12409 8.99361 4.07719 9.06234 4.04502 9.1382C4.01285 9.21406 3.99605 9.29554 3.99559 9.37794C3.99513 9.46034 4.01101 9.54201 4.04234 9.61823C4.07366 9.69444 4.11978 9.76369 4.17805 9.82195C4.23631 9.88022 4.30556 9.92634 4.38177 9.95766C4.45799 9.98898 4.53966 10.0049 4.62206 10.0044C4.70446 10.004 4.78594 9.98715 4.8618 9.95498C4.93766 9.92281 5.00639 9.87591 5.064 9.817L7 7.882L8.936 9.817C9.05327 9.93168 9.21104 9.99548 9.37506 9.99457C9.53908 9.99365 9.69612 9.92809 9.8121 9.8121C9.92809 9.69612 9.99365 9.53908 9.99457 9.37506C9.99548 9.21104 9.93168 9.05327 9.817 8.936L7.882 7L9.817 5.064C9.87591 5.00639 9.92281 4.93766 9.95498 4.8618C9.98715 4.78594 10.004 4.70446 10.0044 4.62206C10.0049 4.53966 9.98898 4.45799 9.95766 4.38177C9.92634 4.30556 9.88022 4.23631 9.82195 4.17805C9.76369 4.11978 9.69444 4.07366 9.61823 4.04234C9.54201 4.01101 9.46034 3.99513 9.37794 3.99559C9.29554 3.99605 9.21406 4.01285 9.1382 4.04502C9.06234 4.07719 8.99361 4.12409 8.936 4.183L7 6.118L5.064 4.183C4.94673 4.06832 4.78896 4.00452 4.62494 4.00543C4.46092 4.00635 4.30388 4.07191 4.1879 4.1879C4.07191 4.30388 4.00635 4.46092 4.00543 4.62494C4.00452 4.78896 4.06832 4.94673 4.183 5.064Z" fill="#B1B1B1" fill-opacity="0.32"></path></g><defs><clippath id="clip0_2589_9951"><rect width="14" height="14" fill="white"></rect></clippath></defs></svg></div></div><div class="imt-fb-more-buttons btn-animate" style="margin-top: 10px; transform: translateX(60px);"><div class="btn-animate" style="position: relative; pointer-events: all; display: inline-block; opacity: 1;"><div><div class="imt-fb-more-button"><svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 22px; height: 22px;"><path d="M13.0613 2.29199C13.441 2.29199 13.7497 2.59985 13.7498 2.97949V4.44824C14.3012 4.68016 14.8216 4.98041 15.2976 5.34277L16.5701 4.6084C16.7278 4.5175 16.9157 4.49304 17.0916 4.54004C17.2676 4.58718 17.4183 4.70266 17.5096 4.86035L19.5721 8.43262C19.6632 8.59049 19.6875 8.77802 19.6404 8.9541C19.5933 9.13021 19.4779 9.28082 19.3201 9.37207L18.0476 10.1064C18.1222 10.7001 18.1222 11.3009 18.0476 11.8945L19.3201 12.6299C19.3983 12.675 19.4673 12.735 19.5223 12.8066C19.5772 12.8783 19.6171 12.9606 19.6404 13.0479C19.6637 13.135 19.6698 13.226 19.658 13.3154C19.6461 13.4048 19.6172 13.4913 19.5721 13.5693L17.5096 17.1416C17.3199 17.47 16.8991 17.5822 16.5701 17.3926L15.2976 16.6572C14.8217 17.0198 14.3012 17.3207 13.7498 17.5527V19.0205C13.7498 19.4003 13.4411 19.709 13.0613 19.709H8.93632C8.55667 19.7088 8.24882 19.4002 8.24882 19.0205V17.5527C7.69719 17.3208 7.17712 17.0197 6.70097 16.6572L5.4285 17.3926C5.2706 17.4837 5.08215 17.5081 4.90604 17.4609C4.73011 17.4137 4.58023 17.2983 4.48905 17.1406L2.42655 13.5684C2.33542 13.4105 2.31007 13.223 2.35722 13.0469C2.40436 12.8708 2.5197 12.7202 2.67753 12.6289L3.94999 11.8945C3.87541 11.3009 3.87543 10.7001 3.94999 10.1064L2.67753 9.37109C2.51984 9.27988 2.4044 9.13004 2.35722 8.9541C2.31007 8.77799 2.33542 8.58954 2.42655 8.43164L4.48905 4.85938C4.58024 4.70185 4.73026 4.58724 4.90604 4.54004C5.08215 4.49289 5.2706 4.51727 5.4285 4.6084L6.70097 5.34277C7.17703 4.9802 7.69724 4.67935 8.24882 4.44727V2.97949C8.24896 2.59994 8.55676 2.29213 8.93632 2.29199H13.0613ZM9.50956 3.55273V5.28516L8.7371 5.60938C8.28138 5.80109 7.85337 6.0502 7.46366 6.34668L6.79765 6.85449L5.29374 5.98633L3.80448 8.56641L5.30546 9.43262L5.20097 10.2637C5.13953 10.753 5.13951 11.248 5.20097 11.7373L5.30546 12.5674L3.80448 13.4346L5.29374 16.0146L6.79667 15.1465L7.46464 15.6543C7.85612 15.9522 8.28357 16.2 8.7371 16.3906L9.50956 16.7148V18.4482H12.4881V16.7148L13.2615 16.3906C13.7171 16.1989 14.1444 15.9507 14.534 15.6543L15.201 15.1465L16.7039 16.0146L18.1941 13.4346L16.6922 12.5674L16.7976 11.7373C16.8591 11.248 16.859 10.7529 16.7976 10.2637L16.6922 9.43262L18.1941 8.56641L16.7049 5.98633L15.201 6.85449L14.533 6.34668C14.1438 6.05076 13.7173 5.80152 13.2605 5.61035L12.4881 5.28516V3.55273H9.50956ZM10.9998 7.79199C11.8506 7.79209 12.6668 8.12985 13.2683 8.73145C13.8699 9.33305 14.2077 10.1492 14.2078 11C14.2078 11.8507 13.8698 12.6669 13.2683 13.2686C12.6668 13.8701 11.8506 14.2089 10.9998 14.209C10.1489 14.209 9.33292 13.8702 8.73124 13.2686C8.12956 12.6669 7.79081 11.8509 7.79081 11C7.7909 10.1492 8.12964 9.33305 8.73124 8.73145C9.33288 8.12998 10.1491 7.79199 10.9998 7.79199ZM10.9998 9.05273C10.4831 9.05273 9.98719 9.25772 9.62186 9.62305C9.2567 9.98829 9.05164 10.4835 9.05155 11C9.05155 11.5167 9.25653 12.0126 9.62186 12.3779C9.98719 12.7432 10.4832 12.9482 10.9998 12.9482C11.5162 12.9481 12.0115 12.7431 12.3767 12.3779C12.7421 12.0126 12.9471 11.5167 12.9471 11C12.947 10.4835 12.742 9.9883 12.3767 9.62305C12.0115 9.2578 11.5163 9.05283 10.9998 9.05273Z" fill="#666666"></path></svg></div></div></div><div class="btn-animate" style="position: relative; pointer-events: all; display: inline-block; opacity: 1;"><div><svg class="imt-fb-feedback" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.0003 14.2749C11.213 14.2749 11.3895 14.2047 11.5299 14.0643C11.6705 13.9239 11.7408 13.7473 11.7408 13.5345C11.7408 13.3218 11.6705 13.1453 11.5299 13.0049C11.3895 12.8645 11.213 12.7943 11.0003 12.7943C10.7877 12.7943 10.6111 12.8645 10.4707 13.0049C10.3302 13.1453 10.2599 13.3218 10.2599 13.5345C10.2599 13.7473 10.3302 13.9239 10.4707 14.0643C10.6111 14.2047 10.7877 14.2749 11.0003 14.2749ZM11.0003 11.0842C11.1954 11.0842 11.3587 11.0185 11.4903 10.8869C11.622 10.7552 11.6878 10.5918 11.6878 10.3967V6.23645C11.6878 6.04135 11.622 5.87803 11.4903 5.74649C11.3587 5.6148 11.1954 5.54895 11.0003 5.54895C10.8052 5.54895 10.6419 5.6148 10.5104 5.74649C10.3787 5.87803 10.3128 6.04135 10.3128 6.23645V10.3967C10.3128 10.5918 10.3787 10.7552 10.5104 10.8869C10.6419 11.0185 10.8052 11.0842 11.0003 11.0842ZM5.53562 16.8311L3.70045 18.666C3.43966 18.9269 3.13968 18.9861 2.80051 18.8434C2.4615 18.7005 2.29199 18.4434 2.29199 18.072V4.73816C2.29199 4.27509 2.45241 3.88314 2.77324 3.5623C3.09408 3.24147 3.48603 3.08105 3.9491 3.08105H18.0516C18.5146 3.08105 18.9066 3.24147 19.2274 3.5623C19.5482 3.88314 19.7087 4.27509 19.7087 4.73816V15.174C19.7087 15.637 19.5482 16.029 19.2274 16.3498C18.9066 16.6706 18.5146 16.8311 18.0516 16.8311H5.53562ZM4.95033 15.4561H18.0516C18.1221 15.4561 18.1868 15.4266 18.2454 15.3678C18.3042 15.3092 18.3337 15.2445 18.3337 15.174V4.73816C18.3337 4.66758 18.3042 4.60295 18.2454 4.54428C18.1868 4.48546 18.1221 4.45605 18.0516 4.45605H3.9491C3.87851 4.45605 3.81389 4.48546 3.75522 4.54428C3.6964 4.60295 3.66699 4.66758 3.66699 4.73816V16.7254L4.95033 15.4561Z" fill="#666666"></path></svg></div></div></div></div></div></template></div></html>